从Twitter的bootstrap修改bootstrap-modal jquery插件,我看到他们使用CSS过渡来实现渐变效果。
这行令我着迷的是这一行:
that.$element[0].offsetWidth // force reflow
如果该行被注释,过渡将不起作用。我发现有关其含义的所有参考文献都是“强制回流”注释。
读取该属性如何影响CSS过渡?这是为了解决浏览器中的错误吗?
回复有点晚,但是我正在解决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
因此,如果我取消对重排线的注释,则会发生过渡,但是有时(在野生动物园中更常见),myelement的z-index不会被更新。
在我看来,在某些情况下,写入dom的样式将被缓冲在某个位置而不被刷新。
这就是调用左偏移量的地方。这是据说导致页面重排的属性之一。显然,这通常是对性能不利的事情,但似乎有必要防止css过渡选择错误的值。
有一个有趣的Mozilla错误,讨论了同一主题。可能会引起一些兴趣。他们建议添加API以正确地从代码开始过渡。
希望这可以帮助!:)