javascript - requestAnimationFrame not waiting for the next frame -

thanks checking in!

so far know (it may wrong) javascript's requestanimationframe method works (a little bit) settimeout except doesn't wait amount of time next frame rendered.

this can used lot of things, i'm trying achieve here css based javascript controlled fade effect. here code looks explanation:

//this line makes element displayed block none //but @ point has opacity value of 0 this.addclass('element__displayed');  //here waiting frame added //display value takes effect window.requestanimationframe(function(){     //adding opacity: 1 fade effect     this.addclass('element__visible'); }.bind(this)); 

my problem here though element has css transition set , waiting display value rendered, getting no transition, pops in.

(it works if use settimeout(..., 1000/60), settimeout performance bottleneck compared requestanimationframe)

please don't try give alternate solution fading effect because question not effect, why animationframe isn't working!

thank you!

i think requestanimationframe not guaranteed wait next frame. paul irish writes

any rafs queued in event handlers executed in ​same frame​. rafs queued in raf executed in next frame​.

if adapted demo, works me on chrome: https://jsfiddle.net/ker9zpjs/

i once found helper in toolbox since then:

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

but must confess answer not researched, if find better information, appreciate it.