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

问题描述

从Twitter的引导修改bootstrap-modal jquery插件我看到他们使用CSS转换的衰落效果。

：

 。$ element [0] .offsetWidth //强制回流
  / pre> 
 
 
如果该行被注释，则转换不起作用。 
所有引用我发现它的意思是强制回流注释。
 
 
 
如何读取该属性可以影响CSS转换？这是为了解决浏览器中的错误吗？
解决方案
 
 
 
 
基本上，我要从JavaScript / jQuery中切换一个类将css转换添加到dom元素。然后更新此元素的CSS，这将导致发生转换。代码的简化版本如下：
  var myelement = $（myselector）; 
 
 //在转换之前设置z-index 
 myelement.css（z-index，1）; 
 
 var reflow = root.offset（）。left; // re-flow the page 
 
 //在元素上设置转换类，将动画
 myelement.addClass（trans）; 
 myelement.css（width，0 +px）; // Animate to nothing 
  
所以如果我取消注释我的回流线，我的转换会发生，有时候（似乎更多的是在safari）myelement的z-index将不会被更新。
 
 
 
对我来说，似乎在某些情况下，到dom被缓冲在某处而不被刷新。
 
 
 
这是调用左偏移量的地方。这是一个属性，据说导致一个在页面中重新流动。这显然通常是一个糟糕的事情性能明智，但似乎有必要防止css转换拾取错误的值。
 
 
 
有一个有趣的 Mozzilla错误，讨论相同的主题。可能有些兴趣。他们建议添加一个API，以便从代码中正确启动转换。
 
 
 
这也是一个 
 
 
希望这有助于！ ：）
 
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.

How reading that property can affect CSS transitions? Is this to address a bug in browsers?
解决方案
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!

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
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.

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

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.

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.

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

Hope this helps! :)

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