2

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

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

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

我希望你对此有想法？

4

2 回答 2

2

实际上，使用Svelte有一种更简单的方法。Sayloading是一个布尔值。动画应该运行，什么时候loading是真的。然后我们就有了一个line可以上下跳跃的SVG。

<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 提供了一些用于反应性的语法糖。

另请参阅此博客文章。

于 2019-06-25T20:13:07.087 回答
0

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

function stopAnimation(){

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

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

并将其添加到您的 CSS 中：

.displayNone{
display: none;
}

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

于 2015-01-04T16:12:32.833 回答