anfrageAnimationFrame wartet nicht auf den nächsten Frame

Question

Vielen Dank für das Einchecken!

Also soweit ich weiß (es kann falsch sein) JavaScript requestAnimationFrame-Methode funktioniert (ein wenig) wie SetTimeout, außer dass es nicht für eine gewisse Zeit wartet, sondern für das nächste Bild gerendert werden soll.

Dies kann für viele Dinge verwendet werden, aber was ich hier erreichen möchte, ist ein CSS-basierter JavaScript-gesteuerter Fade-Effekt. Hier ist das, was der Code wie mit Erklärung aussieht:

//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)); 

Mein Problem hier ist, dass, obwohl das Element seines CSS-Übergang eingerichtet hat und ich warte auf den Anzeigewert gerendert werden, erhalte ich keinen Übergang es erscheint nur in.

(es funktioniert, wenn ich setTimeout (..., 1000-1060) verwenden, aber setTimeout ist eine Performance-Engpass im Vergleich zu request)

Bitte versuchen sie nicht, eine alternative zu geben Lösung für einen verblassenden Effekt, weil meine Frage nicht der Effekt ist, aber warum der animationFrame nicht funktioniert!

Vielen Dank!

Answer 1

I denken requestAnimationFrame ist nicht garantiert, auf den nächsten Frame zu warten. Paul Irish writes

Alle raFS in Ihren Event-Handler der Warteschlange wird im gleichen Rahmen durchgeführt werden. Alle in einer rAF eingereihten rAFs werden im nächsten Frame ausgeführt.

Wenn Ihr Demo angepasst, funktioniert es für mich jetzt auf Chrome: https://jsfiddle.net/ker9zpjs/

Ich fand einmal diese Helfer, die seitdem in meinem Werkzeugkasten ist:

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

Aber ich muss gestehen, dass mein Antwort ist nicht vollständig erforscht, wenn jemand bessere Informationen finden könnte, würde ich es auch schätzen.