ブートストラップのCSSトランジションにおける「強制リフロー」

Question

Twitterのブートストラップからブートストラップ・モードjqueryプラグインを改訂しました。フェーディング効果のためにCSSトランジションを使用しています。その行が動作しないの移行をコメント化されている場合

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

：コードから私を陰謀

ことの一つは、この行です。 私がその意味について知ったすべての参考文献は、「強制リフロー」というコメントです。

どのようにそのプロパティを読み取るとCSSの遷移に影響を与えることができますか？これはブラウザのバグに対処するためのものですか？

Answer 1

少し遅れて返信しましたが、あなたが見つけたこのコードに関連していると思われるCSSトランジションに関するいくつかの問題に取り組んでいます。

基本的には、DOM要素にCSS遷移を追加するJavascript/jQueryからクラスを切り替えています。この要素の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インデックスを（それがサファリでより頻繁に思える）：コードの簡易版は、以下の通りです更新されました。

私にとっては、特定の状況では、DOMに書き込まれたスタイルがどこかにバッファされていて、フラッシュされていないようです。

これは、左オフセットへの呼び出しが入る場所です。これは、ページ内で再フローを引き起こすと言われるプロパティの1つです。これは明らかに通常はパフォーマンスが悪いことですが、間違った値を取得するCSS遷移を防ぐ必要があります。

同じテーマについて議論されている面白いMozilla bugがあります。興味深いかもしれません。彼らは、コードからの移行を適切に開始するためのAPIの追加を提案しています。

これは、再フローを強制することについてもinteresting SO postです。

希望すると便利です。 :)