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

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

In der Webentwicklung ist es oft wünschenswert, eine Aktion nach einem CSS-Übergang oder auszuführen Die Animation ist abgeschlossen. Allerdings kann es schwierig sein, das genaue Ende dieser Animationen zu bestimmen. In diesem Artikel wird gezeigt, wie Sie mit jQuery den Abschluss von Übergängen und Animationen erkennen und so eine präzise Kontrolle über die DOM-Manipulation gewährleisten.

Übergänge

Um das Ende eines zu erkennen CSS-Übergang über jQuery, verwenden Sie die folgende Syntax:

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

Dies bindet einen Ereignishandler an das angegebene Element, das ausgelöst wird, wenn eines der unterstützten Elemente auftritt Übergangsendereignisse treten auf.

Animationen

Für CSS-Animationen wird ein ähnlicher Ansatz verwendet:

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

Einmalige Sicherstellung Auslösen

Um zu verhindern, dass der Event-Handler mehrmals ausgeführt wird, verwenden Sie die .one()-Methode von jQuery. Dadurch wird sichergestellt, dass der Handler nur einmal ausgelöst wird und danach automatisch entfernt wird:

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

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

Veraltung der jQuery-Methode

Beachten Sie, dass die Methode .bind() veraltet ist in jQuery 1.7. Verwenden Sie stattdessen .on():

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

Dieser äquivalente Code verwendet .off(), um das Verhalten von .one() effektiv nachzuahmen.

Referenzen:

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

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