Gibt es einen Rückruf nach Abschluss einer CSS3-Animation?

Gibt es eine Möglichkeit, eine Rückruffunktion bei CSS3-Animationen zu implementieren? Im Falle einer Javascript-Animation ist dies möglich, findet jedoch keine Möglichkeit, dies in CSS3 zu tun.

Eine Möglichkeit, die ich sehen könnte, besteht darin, einen Rückruf nach der Animationsdauer auszuführen, aber das stellt nicht sicher, dass er immer direkt nach dem Ende der Animation aufgerufen wird. Dies hängt von der Warteschlange der Browser-Benutzeroberfläche ab. Ich möchte eine robustere Methode. Irgendeine Ahnung?

javascript css frontend ändern
quelle

Mögliches Duplikat des Rückrufs beim CSS-Übergang

Givanse

Wenn Sie eine einfache CSS-Aktion ausführen möchten, z. B. das Element nach dem Übergang ausblenden möchten, benötigen Sie möglicherweise keinen Rückruf. Stattdessen können Sie Ihr Problem mit dem Keyframe der Animation lösen.

Madmadi

Antworten:

130

Ja da ist. Der Rückruf ist ein Ereignis, daher müssen Sie einen Ereignis-Listener hinzufügen, um ihn abzufangen. Dies ist ein Beispiel mit jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Oder reine js:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Live-Demo: http://jsfiddle.net/W3y7h/

Methode der Aktion
quelle

Für IE10 ist es 'MSAnimationEnd' (siehe msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

Martin Wittemann

Es ist transitionendnicht animationend.

@ MichaelJones nein, das ist für CSS3-Übergänge. Die Frage betraf Animationen.

Joshvermaire

@MartinWittemann IE10 final verwendet jetzt animationend msdn.microsoft.com/en-us/library/ie/… . @Husky der Code funktioniert in Chrome und FF 14, siehe aktualisierte Geige jsfiddle.net/W3y7h

Methodofaction

Duplikat von stackoverflow.com/questions/9255279/…, das eine vollständigere Lösung hat

vanthome

Eine einfache Möglichkeit für Sie, einen Rückruf durchzuführen, der auch Ihre CSS3-Übergänge / Browserkompatibilitäten behandelt, ist das jQuery Transit Plugin . Beispiel:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddle Demo

ROFLwTIME
quelle

Bonuspunkt für die gemeinsame Nutzung der API-Spezifikation mit jQuery animieren, aber dennoch die von der Hardware gerenderte Glätte von CSS-Animationen nutzen. Wir haben gerade jQuery animate an allen Stellen durch dieses ersetzt.

Logan