如何让javascript控制css3的animation和transition，让css3

Question

我们现在想通过按钮的click事件反复触发一个元素的css3动画，点击一次，动画效果就跑一次。现在碰到这样一个问题，我通过click事件给目标元素添加一个带有css3动画的class，动画效果第一次有，后续就不再触发css3动画了。click事件中先删除class再添加还是不行，怎么办？（后面附有测试代码线上链接）

测试代码线上链接如下：
线上测试代码

Answer 1

刚过来就看到看到正确答案真是悲伤的故事。那我就来稍微解释一下为何setTimeout 0在这里能够起到效果吧。如果没有setTimeout 0，浏览器的执行流程是这样的:先removeClass，然后addClass，然后让浏览器重新渲染完整个元素属性。这样就不会有transition动画效果了。其实setTimeout 0的作用相当于把内部代码放到当前上下文的最后去执行，在这个问题中的作用就相当于是先removeClass，然后让浏览器重新渲染完整个元素属性，然后addClass。如果解释的不对还请dalao谅解并指出问题。