Wie erkennt man den Abschluss von CSS3-Übergängen und -Animationen mit jQuery?

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

Übergangselemente mit CSS3 bieten flüssigere Animationen als herkömmliche JavaScript-Techniken. Bei der Arbeit mit CSS3-Animationen stellt sich jedoch die Frage: Wie können Sie feststellen, wann der Übergang abgeschlossen ist?

jQuery bietet eine Lösung für dieses Bedürfnis. Um das Ende eines CSS3-Übergangs zu überwachen, können Sie einen Ereignishandler mithilfe der folgenden Syntax binden:

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

Ähnlich können Sie für CSS3-Animationen Folgendes verwenden:

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

Durch Bereitstellung Mit allen browserpräfixierten Ereigniszeichenfolgen in der bind()-Methode stellen Sie die Kompatibilität zwischen Browsern sicher.

Sicherstellung der einmaligen Ausführung des Handlers

Um eine wiederholte Ausführung des zu verhindern Handler können Sie die .one()-Methode von jQuery verwenden. Zum Beispiel:

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

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

Abschreibung der Methode .bind()

Die Methode bind() von jQuery wurde zugunsten von .on() veraltet. Daher sollten Sie Folgendes verwenden:

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

Diese Methode stellt außerdem sicher, dass der Handler nur einmal ausgeführt wird.

Weitere Details finden Sie in den folgenden Referenzen:

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

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