javascript - Bootstrap 中的 CSS 转换中的 "Force Reflow"

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 以正确地从代码开始转换。

这也是一个 interesting SO post关于强制重新流动。

希望对您有所帮助! :)