Wie erkennt man das Ende von CSS3-Übergängen und -Animationen mit jQuery?

CSS3-Übergänge nutzen: Abschluss mit jQuery erkennen

Beim Animieren von Elementen mithilfe von CSS3-Übergängen ist es notwendig, den genauen Zeitpunkt zu kennen, zu dem sie enden Folgeaktionen durchführen. Im Gegensatz zu jQuery-Animationen verfügen CSS3-Übergänge nicht über integrierte Abschlussrückrufe.

Übergangsendereignisse erfassen

Um das Ende eines Übergangs zu erkennen, bietet jQuery Folgendes Skript:

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

Für Animationen kann ein ähnlicher Ansatz verwendet werden:

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

Durch die Übergabe aller vorangestellten Ereigniszeichenfolgen funktioniert dieses Skript in mehreren Browsern.

Verwenden von .one() für Single Fire

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

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

Veraltung und moderner Ansatz

Die .bind()-Methode von jQuery ist jetzt veraltet. Der bevorzugte Ansatz ist .on(), der in Verbindung mit .off() funktioniert. Hier ist ein Beispiel:

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

Dieser Ansatz stellt sicher, dass die Callback-Funktion nur einmal ausgeführt wird.

Das obige ist der detaillierte Inhalt vonWie erkennt man das Ende von CSS3-Übergängen und -Animationen mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!