Question

所以我有这些移动的动画框。它们从底部无限移动到顶部。到达顶部后，他们重新开始。最初，我可以使用一些sass及其random（）函数来更改其大小和速度。但是当他们每次都以相同的速度行驶时，它看起来很陈旧。

所以我尝试使用javascript来改变每次动画时每个盒子的持续时间。我是这样做的：

let ignBox = document.querySelectorAll('.ign-box');
  let $rand = 0;
  ignBox.forEach(box =>{
    box.addEventListener('animationiteration', function(){

       $rand = (Math.floor(Math.random() * 20) + 3);
      console.log(this);
        this.style.animationDuration =  $rand + 's';
    });
  });

有效。但是，每个项目的发射时间很多。动画持续时间的变化似乎立即触发了该事件！因此，一项可能有8秒，然后又跳到20秒，再跳到5秒。启用JS后，他们现在开始变得不稳定。这是一个codepen： https://codepen.io/saltnpixels/pen/yqzZBb

Answer 1

这是因为animationiteration在每次新迭代的每次启动时都会触发，并且更改animationDuration实际上会重新启动动画，因此它会进入半无限循环。

一种方法是仅运行css动画1次，然后在animationend事件上，更改animationDurationand，然后重新启动动画。

css：

.animated{
  animation: slowMoveUp 3s linear 1;
}

js：

//change box animation times to vary things up
  let ignBox = document.querySelectorAll('.ign-box');
  let $rand = 0;
  ignBox.forEach(box =>{
    box.classList.add("animated");
    box.addEventListener('animationend', function(){
      this.classList.remove("animated");
      $rand = (Math.floor(Math.random() * 20) + 3);
      console.log(this);
      this.style.animationDuration =  $rand + 's';
      void this.offsetWidth; // hack to reflow css animation
      this.classList.add("animated");
    });
  });

向this link提交有关如何重新启动CSS动画以及如何破解的信息。

每次迭代后更改动画持续时间

1 个答案: