您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

Bootstrap中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

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

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

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

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

希望这可以帮助!:)

CSS 2022/1/1 18:14:30 有594人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶