我有一个元素,它有无限的动画
animation: start .75s steps(19) infinite;
现在,过了一段时间(时间改变了),我想停止动画,但这样它就会平稳地运行。当我通过jQuery删除动画类来停止动画时,它就会停止。
我希望你对此有一个想法?
发布于 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。
发布于 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代码,否则它将无法工作
https://stackoverflow.com/questions/17981192
复制相似问题