如何让CSS动画重新执行

追格官方小助手/ 2022年08月10日/ 小程序/ 浏览 3852

css动画以简单高效著称,但也有一些不方便的地方。

比如,如何才能让css动画重新执行呢?不是重复执行,是重新执行。


其实,思路很简单。我们执行css动画,是为元素添加一个class;重新执行动画,就先去掉有动画的class,然后再加上去就可以了。




比如,在uniapp开发小程序的时候,就可以使用类似下面的代码:


<view :class="{animation:do_animation}"></view>


animation 是包含动画的 class。这个class中,最好是只有动画相关的,以避免对其他属性的影响。


先把 do_animation 置为 false,然后再重新置为 true就可以了。


this.do_animation= false;
setTimeout(() => {
        this.do_animation= true;
}, 500);


加一点延迟,防止被优化掉。




如果,是使用 JQuery 开发网页,类似的代码如下:


$('#ele').removeClass('animation_class');
setTimeout(() => { $('#ele').addClass('animation_class') }, 500);




还见过一种方法,就是直接修改元素的 animation 属性,先设置为 none,然后再重新添加。这种方法的好处是避免了对其他属性的影响。类似的代码如下:


ele.style.animationName = 'none';
setTimeout(function(){
    ele.style.animationName = 'animation_name';
},100);


发表评论

暂无评论,抢个沙发...

客服 工单