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

因此，如果我取消对重排线的注释，则会发生过渡，但是有时（在野生动物园中更常见），myelement的z-index不会被更新。

在我看来，在某些情况下，写入dom的样式将被缓冲在某个位置而不被刷新。

这就是调用左偏移量的地方。这是据说导致页面重排的属性之一。显然，这通常是对性能不利的事情，但似乎有必要防止css过渡选择错误的值。

有一个有趣的Mozilla错误，讨论了同一主题。可能会引起一些兴趣。他们建议添加API以正确地从代码开始过渡。

希望这可以帮助！:)