如何让CSS动画重新执行

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);