Bootstrap中CSS转换中的"强制回流"

Question

从Twitter的bootstrap修改bootstrap-modal jquery插件我发现他们使用CSS过渡来获得淡入淡出效果.

从代码中吸引我的一件事是这一行:

that.$element[0].offsetWidth // force reflow

如果该行被注释,则转换不起作用.我发现的关于其含义的所有参考都是"强制回流"评论.

如何读取该属性会影响CSS转换？这是为了解决浏览器中的错误吗？

Answer 1

有点迟到的回复,但是我正在解决CSS过渡的一些问题,我认为这些问题与你找到的这段代码有关,希望能帮助你理解它!

基本上,我是从Javascript/jQuery切换一个类,它将css转换添加到dom元素.然后更新此元素的CSS,从而导致转换发生.代码的简化版本如下:

var myelement = $("myselector");

// Set z-indexes before the transition
myelement.css("z-index", 1); 

var reflow = root.offset().left; // Re-flow the page

// Set the transition class on the element which will animate
myelement.addClass("trans");
myelement.css("width", 0 + "px"); // Animate to nothing

因此,如果我取消注释我的重新流程线,我的转换将会发生,但有时(似乎更常见于safari)myelement的z-index将不会更新.

对我来说,似乎在某些情况下,写入dom的样式在某处被缓冲而不被刷新.

这就是对左偏移的调用的来源.这是据说导致页面重新流动的属性之一.这显然通常是性能方面的坏事,但似乎有必要防止css转换获取错误的值.

有一个有趣的Mozilla bug提出来讨论相同的主题.可能会有一些兴趣.他们建议添加一个API来正确启动代码转换.

这也是一篇关于强制重新流动的SO帖子.

希望这可以帮助!:)