Comment jQuery peut-il détecter la fin des transitions et des animations CSS3 ?

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

En développement Web, il est souvent souhaitable d'effectuer une action après une transition CSS ou l'animation est terminée. Cependant, déterminer la fin exacte de ces animations peut s’avérer délicat. Cet article montrera comment utiliser jQuery pour détecter l'achèvement des transitions et des animations, garantissant ainsi un contrôle précis de la manipulation du DOM.

Transitions

Pour détecter la fin d'un Transition CSS via jQuery, utilisez la syntaxe suivante :

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

Cela lie un gestionnaire d'événements à l'élément spécifié qui se déclenche lorsque l'une des transitions prises en charge des événements de fin se produisent.

Animations

Pour les animations CSS, une approche similaire est utilisée :

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

Assurer un déclenchement unique

Pour empêcher le gestionnaire d'événements de s'exécuter plusieurs fois, utilisez la méthode .one() de jQuery. Cela garantit que le gestionnaire ne se déclenche qu'une seule fois, après quoi il est automatiquement supprimé :

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

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

Dépréciation de la méthode jQuery

Notez que la méthode .bind() est obsolète dans jQuery 1.7. Utilisez plutôt .on() :

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

Ce code équivalent utilise .off() pour imiter efficacement le comportement de .one().

Références :

• [jQuery Désactivé Fonction](https://api.jquery.com/off/)
• [JQuery One Function](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!