平滑停止css无限动画
平滑停止css无限动画
提问于 2013-08-01 05:18:51
我有一个元素，它有无限的动画
animation: start .75s steps(19) infinite;现在，过了一段时间(时间改变了)，我想停止动画，但这样它就会平稳地运行。当我通过jQuery删除动画类来停止动画时，它就会停止。
我希望你对此有一个想法？
回答 2
Stack Overflow用户
发布于 2019-06-26 04:13:07
实际上，使用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函数每800ms处理一次回调执行。这正是CSS转换的长度。
当然，您也可以使用Vanilla JS实现这一点。然而，Svelte为反应性提供了一些语法糖。
另请参阅此blog post。
Stack Overflow用户
发布于 2015-01-05 00:12:33
尝试使用这个非常简单的Javascript语法：
function stopAnimation(){
document.getElementById('animationElement').setAttribute('class', 'displayNone');
};
setTimeout(stopAnimation, 5000);我们的目标id就是做动画的id，我们给它一个叫做'displayNone‘的类，这个类在CSS的file.after中，我们调用这个函数，在动画结束的5秒后做这一切。您可以将其更改为您希望动画结束的任何时间。
并将此代码添加到CSS中：
.displayNone{
display: none;
}注意:确保在动画属性之前添加css代码，否则它将无法工作
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17981192
复制相关文章
相似问题