Wie kann ich den Abschluss von CSS3-Übergängen und -Animationen in jQuery erkennen?

Erkennen des Abschlusses von CSS3-Übergängen und -Animationen

Bei der Arbeit mit CSS3-Animationen oder -Übergängen entsteht eine häufige Herausforderung: Bestimmen, wann die Animationen oder Übergänge abgeschlossen sind. Dieses Wissen ist entscheidend für die Durchführung nachfolgender Aktionen, wie zum Beispiel das Entfernen von Elementen aus dem DOM.

In jQuery haben Sie die Möglichkeit, „Entfernen“ anzugeben, das nach Abschluss einer Animation ausgeführt werden soll. Für CSS3-Übergänge oder -Animationen gibt es jedoch eine spezielle Möglichkeit, ihren Endpunkt zu erkennen.

Übergänge

Für Übergänge stellt jQuery eine Methode bereit, um auf das Ende eines Übergangs zu warten:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Animationen

Das Gleiche gilt für Animationen verwenden:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Beachten Sie, dass Sie alle Browser-Präfix-Ereigniszeichenfolgen an die bind()-Methode übergeben können, um sicherzustellen, dass das Ereignis in mehreren Browsern unterstützt wird.

Einmalige Ereignisbehandlung

Um sicherzustellen, dass der Event-Handler nur einmal ausgelöst wird, können Sie die one()-Methode von jQuery verwenden:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Veraltet Methoden

Derzeit ist die bind()-Methode von jQuery veraltet und on() wird bevorzugt. Sie können auch off() für die Callback-Funktion verwenden, um anzugeben, dass sie nur einmal ausgelöst werden soll. Hier ist ein Beispiel:

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

Referenzen

• [jQuery .off() Methode](https://api.jquery.com/off/)
• [jQuery .one()-Methode](https://api.jquery.com/one/)

Das obige ist der detaillierte Inhalt vonWie kann ich den Abschluss von CSS3-Übergängen und -Animationen in jQuery erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!