“强制回流"在 Bootstrap 中的 CSS 转换中 [英] "Force Reflow" in CSS transitions in Bootstrap

问题描述

从 Twitter 的 bootstrap 修改 bootstrap-modal jquery 插件，我看到他们使用 CSS 过渡来实现淡入淡出效果.

Revising the bootstrap-modal jquery plugin from Twitter's bootstrap I see that they use CSS transitions for the fading effect.

这行代码让我很感兴趣:

One thing that intrigues me from code is this line:

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

如果该行被注释，转换不起作用.我发现的有关其含义的所有参考资料都是强制回流"注释.

If that line is commented transition doesn't work. All reference I've found about its meaning is that "force reflow" comment.

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

How reading that property can affect CSS transitions? Is this to address a bug in browsers?

推荐答案

回复有点晚，但我正在解决 CSS 转换的一些问题，我认为这些问题与您找到的这段代码有关，希望对您有所帮助你理解它！

Bit of a late reply, but I'm tackling some issues with CSS transitions which I think relate to this bit of code you've found, and hopefully help you out with understanding it!

基本上，我正在从 Javascript/jQuery 切换一个类，该类将 css 转换添加到 dom 元素.然后更新此元素的 CSS，这会导致转换发生.代码的简化版本如下:

Basically, I'm toggling a class from Javascript / jQuery that adds css transitions to a dom element. The CSS of this element is then updated which causes the transition to occur. A simplified version of the code is below:

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 不会更新.

So if I uncomment my re-flow line, my transition will occur, but sometimes (it seems more often in safari) the z-index of myelement won't have been updated.

对我来说，似乎在某些情况下，写入 dom 的样式被缓冲在某处而没有被刷新.

To me, it seems that in certain situations, the styles written to the dom are being buffered somewhere and not being flushed.

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

That's where the call to the left offset comes in. This is one of the properties that are said to cause a re-flow in the page. This is obviously usually a bad thing performance wise, but it seems necessary to prevent the css transitions picking up the wrong values.

提交了一个有趣的 Mozilla 错误，其中讨论了同一主题.可能有点意思.他们建议添加一个 API 来正确地从代码开始转换.

There's an interesting Mozilla bug lodged which discusses the same subject. Might be of some interest. They suggest the addition of an API to properly start transitions from code.

这也是一个 有趣的 SO 帖子 关于强制回流.

This is also an interesting SO post about forcing re-flows.

希望这有帮助！:)

这篇关于“强制回流"在 Bootstrap 中的 CSS 转换中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！