Bootstrap中CSS转换中的“强制回流”
从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
因此，如果我取消注释我的重新流程线，我的转换将会发生，但有时（在safari中似乎更常见）myelement的z-index将不会更新。
对我来说，似乎在某些情况下，写入dom的样式在某处被缓冲而不被刷新。
这就是对左偏移的调用的来源。这是据说导致页面重新流动的属性之一。 这显然通常是性能方面的坏事，但似乎有必要防止css转换错误的值。
有一个有趣的Mozilla bug提出来讨论相同的主题。 可能会有一些兴趣。 他们建议添加API以正确启动代码转换。
这也是一篇关于强制重新流动的SOpost 。
希望这可以帮助！ 🙂
我会建议一种不那么强硬和更正式的方法来强制重排：使用forceDOMReflowJS 。 在您的情况下，您的代码将如下所示。
forceReflowJS(that.$element[0]);