js样式的写入与清除，cssText的疑问
今天在用cssText写入样式时遇到的一个问题，具体如下：
代码：
o_bar.onclick=function(){
o_bar.style.cssText="";
o_bar.style.cssText="background:red;animation:mymove 0.8s ease 4 alternate forwards";
};问题：点击时只有ie下是清除了样式然后重新写入重新执行动画，而火狐和chrome下直接执行动画了并没有重新写入没有重新执行动画？纠结了好久不知道怎么会这样子，希望知道的朋友帮帮忙，谢谢！
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
-
这是CSS3动画本身的问题。还有reflow与否的问题。
简单来说，当有使浏览器reflow的操作的时候，动画会被重置，这时就能重复运行，但单单是repaint不行。而修改一个类的动画效果应该是能引起浏览器的reflow的，但是由于chrome等浏览器的优化，在同一个函数块里对同一个元素的cssText进行修改，它会把所有累加再在最后进行修改。而IE则是每一次修改都会。
所以当你在chrome里设断点单步运行时，o_bar.style.cssText="";这句不会起作用。所以你加了延时后又起作用了。
W3C's opition里有句这样的描述。
In order to restart an animation, it must be removed then reapplied.
就是对于这个描述，除了加延时之外还可以用修改元素的宽度、用两个不同名但同样的动画相互替换等方法来达到目的，简单来说就是要引起浏览器的reflow。还有几点很有意思，对于css动画，它运行结束并不会自动的赋予pause状态，仍旧是running状态。
更多的你可以google一下，关键字是 restart css animation。
2019-07-17 19:00:58赞同 展开评论