"强制回流”;在Bootstrap中的CSS转换中

"Force Reflow" in CSS transitions in Bootstrap

本文关键字：中的 Bootstrap CSS 转换 quot      更新时间：2023-09-26

从Twitter的bootstrap中修改bootstrap模式的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中似乎更常见）mylement的z索引不会更新。

对我来说，在某些情况下，写入dom的样式似乎被缓冲在某个地方，而不是被刷新。

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

Mozilla有一个有趣的bug，它讨论了同样的主题。可能会引起一些兴趣。他们建议添加一个API来正确地启动代码转换。

这也是一篇关于强制回流的有趣的SO文章。

希望这能有所帮助！：）

我建议使用一种不那么粗糙、更正式的方法来强制回流：使用forceDOMReflowJS。在您的情况下，您的代码如下所示。

forceReflowJS(that.$element[0]);

它会导致网页回流。因为display-none样式的元素不会转换，所以它将强制网页在显示到块后回流，从而进行转换。Ex bootstrap Modal

相关文章：