如何从长度 0 -> 100 设置动画但从 100 -> 0 移除动画

Question

我有这个时间表

<div class="timeline-wrapper">
 <div class="timeline-item">
   <div class="timeline-loaded" style="width: 100%"></div>
 </div>
 <div class="timeline-item">
   <div class="timeline-loaded" style="width: 100%"></div>
 </div>
 <div class="timeline-item">
   <div class="timeline-loaded" style="width: 83%"></div>
 </div>
</div>

所以最后一个项目从 84、85 等上升到 84、85 等。但是当我重置时间线时，我想让所有项目的样式宽度为：0%，但是它有过渡动画，所以你看到它转到0 但它需要立即变为 0 并平滑地从 0 填充到 100%。

欢迎任何帮助！

Answer 1

通过阅读你的问题，我得到的是你需要一些进度条。你可以参考这个。 https://www.w3schools.com/howto/howto_js_progressbar.asp

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

基本上它会修改 class 的宽度。如果您在这方面需要更多帮助，请使用 jsfiddle 或其他工具详细说明您的要求。

如何从长度 0 -> 100 设置动画但从 100 -> 0 移除动画

How to animate from length 0 -> 100 but remove animation from 100 -> 0

javascript

css

animation

css-animations