javascript - 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。

这篇关于javascript - js样式的写入与清除，cssText的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！