平滑停止css无限动画答案

【问题标题】：Smoothly stop css infinite animation平滑停止css无限动画
【发布时间】：2013-08-01 14:48:07
【问题描述】：

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

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

现在过了一段时间（这次发生了变化）我想停止动画，但让它顺利运行。当我通过 jQuery 通过删除动画类来停止动画时，它就停止了。

希望你对此有想法？

【问题讨论】：

你能找到答案吗？
阅读 my article 上的 CSS 技巧。没有简单的方法可以做到，但可以做到

标签： jquery css css-animations infinite

【解决方案1】：

实际上，使用Svelte 有一个更简单的方法。说loading 是一个布尔值。当loading 为真时，动画应该会运行。然后我们有例如一个 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 提供了一些用于反应性的语法糖。

另见blog post。

【讨论】：

【解决方案2】：

尝试使用这种非常简单的 Javascript 语法：

function stopAnimation(){

document.getElementById('animationElement').setAttribute('class', 'displayNone');
};
setTimeout(stopAnimation, 5000);

我们定位的 id 是执行动画的那个，我们给它一个名为“displayNone”的类，它在我们的 CSS 文件中。在这之后，我们调用函数在 5 秒后执行所有这些操作，即当你的动画结束时。您可以将其更改为您希望动画结束的任何时间。

并将其添加到您的 CSS 中：

.displayNone{
display: none;
}

注意：请确保在动画属性之前添加 css 代码，否则它将不起作用

【讨论】：