Wie kann ich mit jQuery das Ende von CSS3-Übergängen und -Animationen erkennen?

Verwenden von jQuery zum Erkennen des Endes von CSS3-Übergängen und -Animationen

Das Ausführen von Aktionen nach Abschluss von CSS-Übergängen und -Animationen kommt häufig während der Webentwicklung vor . Um dies mit jQuery zu erreichen, muss man für diese beiden Animationstypen unterschiedliche Ansätze anwenden.

Umgang mit Übergängen:

Für Übergänge bietet jQuery einen praktischen Listener, der die Schlussfolgerung erkennt eines Übergangs:

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

Handhabung Animationen:

In ähnlicher Weise gibt es für Animationen einen ähnlichen Listener:

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

Um alle kompatiblen Browser zu unterstützen, können alle dem Browser vorangestellten Ereigniszeichenfolgen an bind() übergeben werden. Methode gleichzeitig.

Einmaliges Ereignisauslösen:

Um sicherzustellen, dass Handler nur einmal auslöst, schlägt Duck die Verwendung der .one()-Methode von jQuery vor:

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

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

Verwendung moderner jQuery-Ereignisse:

Es ist wichtig zu beachten, dass bind() dies hat ist in jQuery 1.7 veraltet. Die bevorzugte Methode ist on(). Um sicherzustellen, dass die Callback-Funktion nur einmal ausgelöst wird, verwenden Sie off().

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

Durch das Verständnis dieser Methoden können Entwickler Aktionen effektiv ausführen, wenn CSS3-Übergänge und -Animationen abgeschlossen sind für reaktionsschnellere und immersivere Weberlebnisse.

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