Bootstrap 中 CSS 过渡中的“强制回流”答案

【问题标题】："Force Reflow" in CSS transitions in BootstrapBootstrap 中 CSS 过渡中的“强制回流”
【发布时间】：2012-02-19 10:32:54
【问题描述】：

从 Twitter 的 bootstrap 中修改 bootstrap-modal jquery 插件我看到他们使用 CSS 过渡来实现淡化效果。

代码让我感兴趣的一件事是这一行：

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

如果该行被注释，则转换不起作用。我发现的所有关于其含义的参考都是“强制回流”注释。

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

【问题讨论】：

也看到这个问题：stackoverflow.com/questions/15186245/…

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

它会导致网页重排。因为具有 display none 样式的元素不会转换，它会在显示阻塞后强制网页重排，因此会发生转换。Ex bootstrap Modal

【讨论】：

【解决方案2】：

我会推荐一种不那么生硬和更正式的方式来强制回流：使用forceDOMReflowJS。在您的情况下，您的代码如下所示。

forceReflowJS(that.$element[0]);

【讨论】：

这肯定比原始代码更具可读性，但请注意，这只是一个包装原始代码的方法
更正：它是一种包装原始代码的有界方法。限制方法防止或明确告诉（基于浏览器的复杂性及其优化能力）浏览器对其执行死代码消除

【解决方案3】：

回复有点晚，但我正在解决 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

因此，如果我取消注释我的 re-flow 行，我的转换将会发生，但有时（在 safari 中似乎更常见）myelement 的 z-index 不会更新。

在我看来，在某些情况下，写入 dom 的样式似乎在某处被缓冲而不被刷新。

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

有一个有趣的Mozilla bug 提出讨论相同的主题。可能有点意思。他们建议添加一个 API 以正确地从代码开始转换。

这也是一个关于强制回流的interesting SO post。

希望这会有所帮助！ :)

【讨论】：

@AlejandroIglesias 上面的代码是我写的一个jQuery插件修改的，所以root是我的插件应用到的根元素。
小心缩小。由于变量 reflow 实际上并没有在任何地方使用，因此代码压缩器可能只会处理该行代码。将其包装在 void 函数中可能会更好。 IE。 void( root.offset().left )
这个技巧允许我的登录页面在登录按钮单击事件触发之前完全重新绘制，这解决了在登录过程中挂起的粘性标记的问题。像这样： $(".reveal-eye-img").addClass("hidden"); var reflow = $(document.documentElement).offset().left; // 重新排列页面，以便拾取 css 更改并隐藏眼睛 $(".login-button-class").click();