小编典典

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

css

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

这行令我着迷的是这一行:

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

如果该行被注释,过渡将不起作用。我发现有关其含义的所有参考文献都是“强制回流”注释。

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


阅读 453

收藏
2020-05-16

共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

因此,如果我取消对重排线的注释,则会发生过渡,但是有时(在野生动物园中更常见),myelement的z-index不会被更新。

在我看来,在某些情况下,写入dom的样式将被缓冲在某个位置而不被刷新。

这就是调用左偏移量的地方。这是据说导致页面重排的属性之一。显然,这通常是对性能不利的事情,但似乎有必要防止css过渡选择错误的值。

有一个有趣的Mozilla错误,讨论了同一主题。可能会引起一些兴趣。他们建议添加API以正确地从代码开始过渡。

希望这可以帮助!:)

2020-05-16