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

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

Lorsque vous travaillez avec des animations ou des transitions CSS3, un défi courant se pose : déterminer quand les animations ou les transitions sont terminées. Cette connaissance est cruciale pour effectuer des actions ultérieures, telles que la suppression d'éléments du DOM.

Dans jQuery, vous avez la possibilité de spécifier que "Supprimer" se produise une fois l'animation terminée. Cependant, pour les transitions ou animations CSS3, il existe une manière spécifique de détecter leur point final.

Transitions

Pour les transitions, jQuery fournit une méthode pour écouter la fin d'une transition :

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

Animations

De même, pour les animations, vous pouvez use :

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

Notez que vous pouvez transmettre toutes les chaînes d'événements préfixées par le navigateur dans la méthode bind() pour garantir que l'événement est pris en charge sur plusieurs navigateurs.

Gestion des événements uniques

Pour garantir que le gestionnaire d'événements n'est déclenché qu'une seule fois, vous pouvez utiliser one() de jQuery method :

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

Méthodes obsolètes

Actuellement, la méthode bind() de jQuery est obsolète et on() est préféré. Vous pouvez également utiliser off() sur la fonction de rappel pour spécifier qu'elle ne doit être déclenchée qu'une seule fois. Voici un exemple :

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

Références

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