Comment surveiller la fin des transitions et animations CSS3 avec jQuery ?

Comment surveiller la conclusion des transitions et des animations CSS3 à l'aide de jQuery

Lors de la disparition d'un élément à l'aide d'une transition d'opacité, il est courant de vouloir supprimez l'élément du DOM une fois terminé. jQuery simplifie ce processus en vous permettant de spécifier la suppression une fois l'animation terminée. Cependant, cela devient plus difficile lors de l'utilisation de transitions CSS3.

Détection des fins de transition/animation

Pour détecter la fin d'une transition via jQuery, vous pouvez utiliser les éléments suivants :

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

Mozilla fournit une référence détaillée pour cette approche : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

Pour animations, la méthode est similaire :

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

Vous pouvez spécifier toutes les chaînes d'événements préfixées par le navigateur dans la méthode bind() pour garantir la compatibilité.

Gestion des événements à exécution unique

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(){ ... });

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

Dépréciation de Bind()

La méthode bind() de jQuery est obsolète ; utilisez plutôt on() (à partir de jQuery 1.7). Vous pouvez également utiliser off() sur la fonction de rappel pour activer le déclenchement unique. Voici un exemple équivalent utilisant on() et off() :

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

Références :

• [Méthode .off()](https:/ /api.jquery.com/off/)
• [Méthode .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!