requestAnimationFrameは次のフレームを待っていません

Question

チェックインしてくれてありがとう！

JavaScriptのrequestAnimationFrameメソッドはsetTimeoutのように動作しますが、一定の時間は待たずに次のフレームをレンダリングすることを除いて動作します（間違っている可能性があります）。

これは多くのことに使用できますが、ここで達成しようとしているのはCSSベースのJavaScript制御のフェード効果です。ここ コードが説明と次のようになります。ここ

//This line makes the element displayed as block from none 
//but at this point it has an opacity value of 0 
this.addClass('element__displayed'); 

//here i am waiting a frame so that the previously added 
//display value takes effect 
window.requestAnimationFrame(function(){ 
    //adding opacity: 1 for fade effect 
    this.addClass('element__visible'); 
}.bind(this)); 

私の問題は、要素がそのCSSの遷移がセットアップされ、私がレンダリングされる表示値を待っていているにもかかわらず、私は何の変化を取得していないだということです、それだけでポップ。

（私はsetTimeoutを（...、1000年から1060年）を使用する場合、それは動作しますが、setTimeoutをはrequestAnimationFrameのと比較して、パフォーマンスのボトルネックである）

を代替を提供しようとしないでくださいなぜなら、私の質問は効果ではなく、なぜanimationFrameが機能しないのかということです。

ありがとうございました！

Answer 1

I と思うrequestAnimationFrameは次のフレームを待つことを保証しません。 Paul Irish writes

RAFSがあなたのイベントハンドラにキューイングどれが同じフレームで実行されます。 rAFにキューイングされたrAFは、次のフレームで実行されます。

あなたのデモを適応した場合、それはChromeで今私の作品：https://jsfiddle.net/ker9zpjs/

私は一度それ以来、私のツールボックスにあるこのヘルパーが見つかりました：

var nextFrame = function(fn) { raf(function() { raf(fn); }); }; 

をしかし、私は私のことを告白しなければなりません答えが完全に研究されていない、誰かがより良い情報を見つけることができれば、私はそれも感謝します。