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

Surveillance de l'achèvement des transitions et des animations CSS3 dans jQuery

Dans le développement Web, il est souvent souhaitable de faire disparaître un élément et de le supprimer ensuite de le DOM une fois l'animation terminée. Bien que cela soit simple avec les capacités d'animation de jQuery, l'étendre aux transitions CSS3 nécessite un mécanisme pour détecter leur conclusion.

Heureusement, jQuery fournit des pistes pour résoudre ce problème :

Transitions

Pour détecter la fin d'une transition CSS via jQuery, utilisez les classeurs d'événements suivants :

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

Mozilla développe ce point plus en détail sur https://developer.mozilla.org/en -US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

Animations

Pour les animations, l'approche est similaire :

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

Un point crucial à noter est qu'en utilisant simultanément la méthode bind() avec toutes les chaînes d'événements préfixées par le navigateur, vous pouvez garantir la prise en charge de tous les navigateurs dotés de cette fonctionnalité.

Optimisation de la gestion des événements

Pour limiter le déclenchement du gestionnaire à une seule occurrence, utilisez la méthode .one() de jQuery, comme ceci :

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

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

Dépréciation de la méthode et alternatives modernes

Il convient de reconnaître que la méthode bind() de jQuery est obsolète depuis jQuery 1.7 au profit de la méthode on(). De plus, vous pouvez exploiter la méthode off() dans la fonction de rappel pour garantir une exécution unique, comme démontré dans cet exemple :

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

Cette approche a le même effet que l'utilisation de la méthode one(). .

Ressources supplémentaires

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