jquery - 平滑停止css无限动画

Question

我有一个具有无限动画的元素

animation: start .75s steps(19) infinite;

现在过了一段时间(这次发生变化)我想停止动画，但这样它就能顺利地结束。当我通过 jQuery 通过删除动画类来停止动画时，它就会停止。

我希望你对此有什么想法？

Answer 1

实际上，有一种更简单的方法，使用 Svelte 。假设 loading 是一个 bool 值。当 loading 为 true 时，动画应该运行。然后我们有例如一条应该上下跳跃的 SVG line。

<line id="line-0" class="{animateClass ? 'animate' : ''}" x1="0" y1="0" x2="0" y2="20"/>

我们添加以下 CSS。

line {
  stroke: black;
  stroke-width: 3px;
  transition: all 0.8s ease-in-out;
}

line.animate {
  animation-direction: alternate;
  transition: all 0.8s ease-in-out;
  transform: translateY(-50%);
}

如您所见，我们使用单次运行转换。当 animate 类存在时，进行跳转转换；当 animate 类消失时，进行向下转换。

现在，我们需要一些 JavaScript 来控制起伏。

let animateClass = false;
let intervalId;

function animateLine(loading) {
  if (loading) {
    if (!intervalId) {
      animateClass = true;
      intervalId = setInterval(() => animateClass = !animateClass, 800);
     }
  } else {
    clearInterval(intervalId);
    intervalId = null;
    animateClass = false;
  }
}

$: animateLine(loading); // call the function every time loading is updated

每次 loading 发生变化时，都会调用 animateLine 函数，并在跳跃和下降过渡之间交替。这也保证了动画的顺利停止。此外，动画本身是纯 CSS，因此性能非常好。

请注意，setInterval 函数每 800 毫秒处理一次回调执行。这正是 CSS 过渡的长度。

当然，您也可以使用 Vanilla JS 来实现。然而，Svelte 提供了一些用于 react 性的语法糖。

另请参阅 blog post .