Question

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

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

现在经过一段时间（这次改变）我想停止动画，但它会顺利用完。当我通过删除动画类来停止动画时，它就停止了。

我希望你对此有所了解？

Answer 1

实际上，使用Svelte的方法要简单得多。说loading是布尔值。当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提供了一些语法糖来增强反应性。

另请参阅此blog post。

Answer 2

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

function stopAnimation(){

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

我们定位的ID就是制作动画的ID，我们会给它一个名为＆＃39; displayNone＆＃39;这是在我们的CSS文件中。在此之后我们调用该函数在5秒后执行所有操作，这是动画结束的时候。您可以将其更改为您希望动画结束的任何时间。

并将其添加到您的CSS：

.displayNone{
display: none;
}

N.B：确保在动画属性之前添加css代码，否则它将无法正常工作

顺利停止css无限动画

2 个答案: