Comment détecter la fin des transitions et des animations CSS3 avec jQuery ?

Détection de l'achèvement des transitions et des animations CSS3 à l'aide de jQuery

La transition d'éléments avec CSS3 offre des animations plus fluides que les techniques JavaScript traditionnelles. Cependant, lorsque l'on travaille avec des animations CSS3, la question se pose : comment déterminer quand la transition est terminée ?

jQuery apporte une solution à ce besoin. Pour surveiller la fin d'une transition CSS3, vous pouvez lier un gestionnaire d'événements en utilisant la syntaxe suivante :

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

De même, pour les animations CSS3, vous pouvez utiliser :

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

En fournissant toutes les chaînes d'événements préfixées par le navigateur dans la méthode bind(), vous garantissez la compatibilité entre les navigateurs.

Assurer l'exécution unique du gestionnaire

Pour empêcher l'exécution répétée du gestionnaire, vous pouvez utiliser la méthode .one() de jQuery. Par exemple :

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

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

Dépréciation de la méthode .bind()

La méthode bind() de jQuery a été dépréciée au profit de .on(). Par conséquent, vous devez utiliser :

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

Cette méthode garantit également que le gestionnaire n'est exécuté qu'une seule fois.

Pour plus de détails, reportez-vous aux références suivantes :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!