js实现css3的过渡,需要注意的一点(浏览器优化)

2014-11-12 来源: royalrover 发布在  http://www.cnblogs.com/accordion/p/4092158.html

大部分浏览器对元素几何改变时候的重排做了优化。据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排。其中如果使用分离的一步处理过程,例如计时器,依然多次重排。例如,当我们应用transition动画的时候,希望从0px变化到100px. 你如果如下代码:

dom.style.left = "0px";
dom.style.left = "100px";
 
元素是不会从0~100像素动画的,因为现代浏览器有自己的优化机制,它只会处理后面的dom.style.left = "100px",
可以通过访问元素的OffsetHeight属性,来让起重绘,$.fn.redraw = function(){ $(this).each(function(){ var redraw = this.offsetHeight; });};
 
知道为啥这样访问offsetHeight可以实现功能吗??原因很简单,访问元素的offsetHeight属性会导致该元素的回流,重新计算元素的位置。但是这样实现动画可能会造成性能问题。
 
之前转载的一篇翻译文章提到了 “影响回流的因素”:
  1. 调整窗口大小(Resizing the window)
  2. 改变字体(Changing the font)
  3. 增加或者移除样式表(Adding or removing a stylesheet)
  4. 内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in
    an input box)
  5. 激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))
  6. 操作 class 属性(Manipulating the class attribute)
  7. 脚本操作 DOM(A script manipulating the DOM)
  8. 计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)  根据此可以实现一个jquery插件,让元素回流并重绘。ex. el.style.left=20px; a = el.offsetHeight;el.style.left=22px;
  9. 设置 style 属性的值 (Setting a property of the style attribute)
还可以通过setTimeout来实现。
h.style.marginTop = '50px'
setTimeout(function(){

h.style.marginTop = '150px'
            },130)

 
具体的过渡实现,可参考maccaw的博客:http://blog.alexmaccaw.com/css-transitions

相关文章