如何让CSS动画重新执行

08月/10日/小程序/浏览 418

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

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


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


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


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


animation 是包含动画的 class。

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


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


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

发表评论

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

客服 工单