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。

希望这有帮助！：）

Answer 2

我建议使用一种不那么强硬且更正式的方式来强制重排：使用forceDOMReflowJS。在您的情况下，您的代码将如下所示。

forceReflowJS(that.$element[0]);

Answer 3

它导致网页重排。因为不显示样式的元素不会过渡，它将迫使网页在显示后重排以阻止进行过渡。Exbootstrap Modal

Bootstrap中CSS转换中的“强制回流”

3 个答案: