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

En attente des transitions CSS3 avec jQuery

Lors de l'utilisation de transitions CSS3 pour animer des éléments, déterminer quand l'animation est terminée peut être difficile. Contrairement aux animations jQuery, qui permettent des rappels à la fin des animations, les transitions CSS3 ne fournissent pas un tel mécanisme. Cependant, il existe une solution utilisant jQuery.

Détection de l'achèvement de la transition

jQuery fournit des écouteurs d'événements qui peuvent être utilisés pour détecter la fin des transitions CSS3. Ces auditeurs sont :

• transitionend
• webkitTransitionEnd
• oTransitionEnd
• MSTransitionEnd

Vous pouvez vous lier à ces événements en utilisant la méthode bind() sur le sélecteur que vous souhaitez suivre. Par exemple :

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

Détection de la fin d'une animation

Semblable aux transitions, les animations peuvent également être détectées à l'aide de l'événement jQuery auditeurs :

• animationend
• webkitAnimationEnd
• oAnimationEnd
• MSAnimationEnd

Utilisez la méthode bind() comme avant :

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

Événement ponctuel Déclenchement

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

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

Bonnes pratiques

• Passer tous les événements préfixés par le navigateur chaînes dans la méthode bind() pour prendre en charge tous les navigateurs.
• Utilisez .one() pour empêcher le gestionnaire de déclencher plusieurs fois.
• La méthode bind() de jQuery est obsolète ; on() est préféré à partir de la version 1.7.
• Vous pouvez également utiliser off() pour détacher le rappel après le déclenchement de l'événement afin de garantir qu'il ne se déclenche 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!