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

Exploiter les transitions CSS3 : détecter l'achèvement avec jQuery

Lors de l'animation d'éléments à l'aide de transitions CSS3, il devient nécessaire de connaître le moment précis auquel elles se terminent effectuer des actions ultérieures. Contrairement aux animations jQuery, les transitions CSS3 n'ont pas de rappels d'achèvement intégrés.

Capturer les événements de fin de transition

Pour détecter la fin d'une transition, jQuery propose les éléments suivants script :

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

Pour les animations, une approche similaire peut être utilisée :

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

En transmettant toutes les chaînes d'événements préfixées, ce script fonctionnera sur plusieurs navigateurs.

Utilisation de .one() pour Single Fire

Pour garantir que le gestionnaire d'événements ne se déclenche qu'une seule fois, vous pouvez utiliser la méthode .one() de jQuery au lieu de .bind() :

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

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

Dépréciation et approche moderne

La méthode .bind() de jQuery est désormais obsolète. L'approche préférée est .on(), qui fonctionne conjointement avec .off(). Voici un exemple :

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

Cette approche garantit que la fonction de rappel ne s'exécute qu'une seule fois.

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!