如何为平滑的动画制作动画

Question

因此，我一直在学习使用JS，CSS，HTML的动画，我试图学习如何使一个类似this的卷轴具有动画效果

我尝试过使用jQuery-SlotMachine，尽管我对操作是如何执行的非常迷惑，即使旁边有JS代码也是如此。谁能给我解释一下如何使用相同的API或其他API进行编码，或者在普通的JS中进行编码。

Answer 1

您可以尝试使用少量的javascript代码来控制自定义动画状态的CSS动画。

我想我的样本能帮到你。

CodePen

​

$(document).ready(function() {
  let $elements = $(".element");
  let $transitionList = $(".transition-list");

  let currentIndex = 0;

  setInterval(function() {
    $transitionList.css(
      "transform",
      "translateY(" + currentIndex * -250 + "px)"
    );
    currentIndex++;
    if ($elements.length - 1 < currentIndex) {
      currentIndex = 0;
    }
  }, 750);
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  width: 50%;
}

.center {
  align-items: center;
  justify-content: center;
}

.border-container {
  border: 25px solid #dfe0a0ed;
  border-radius: 30%;
  overflow: hidden;
}

.transition-list {
  width: 250px;
  height: 250px; 
  background-color: #fefefe;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.1, 0.2, 0.7, 1);    
}

.element {
  background-color: #6f6f6f;
  width: 250px;
  height: 250px;
  font-size: 188px;
  display: flex;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="conainer center">
  <div class="border-container">
<div class="transition-list">
  <div class="element center"><i class="fas fa-clock"></i></div>
  <div class="element center"><i class="fas fa-unlock"></i></div>
  <div class="element center"><i class="fas fa-th"></i></div>
  <div class="element center"><i class="fas fa-american-sign-language-interpreting"></i></div>
</div>
  </div>
</div>

​

Answer 2

1.要开始，你必须有一个容器：

<div id="theContainer" class="container">
</div>

2.很棒，现在让我们在里面放一些图片。

<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
</div>

3.现在，让我们添加两个按钮来移动它：

<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?image=0">
   <img src="https://picsum.photos/100/?image=1">
   <img src="https://picsum.photos/100/?image=2">
</div>
<button id="prev" value="Previous">
<button id="next" value="Next">

甜蜜4.！我们有了HTML，现在我们只需要添加Javascript：

​

// Set up previous button
const btnPrev = document.querySelector('#prev');

// Set up Next Button
const btnNext = document.querySelector('#next');

// Set up our container
const el = document.querySelector('#theContainer');

// Create new SlotMachine
const slot = new SlotMachine(el, {});

// Add Event Listeners or do things when we click it
btnPrev.addEventListener('click', () => slot.prev());
btnNext.addEventListener('click', () => slot.next());

<link href="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/jquery.slotmachine.min.css"></style>

<div id="theContainer" class="container" style="width: 100px; height: 100px">
  <div><img src="https://picsum.photos/100/?image=0"></div>
  <div><img src="https://picsum.photos/100/?image=1"></div>
  <div><img src="https://picsum.photos/100/?image=2"></div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

<!-- Add script files -->
<script src="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/slotmachine.min.js"></script>

​

5.说明：

• 您必须向#theContainer添加宽度和高度。(style="width: 100px; height: 100px")
• the图像必须用块元素括起来。(<div><img /></div>)