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

Utiliser jQuery pour détecter la fin des transitions et des animations CSS3

L'exécution d'actions à la fin des transitions et des animations CSS survient souvent lors du développement Web . Pour y parvenir avec jQuery, il faut utiliser des approches différentes pour ces deux types d'animation.

Gestion des transitions :

Pour les transitions, jQuery propose un écouteur pratique qui détecte la conclusion d'une transition :

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

Manipulation Animations :

De même, pour les animations, un écouteur similaire existe :

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

Pour prendre en charge tous les navigateurs compatibles, toutes les chaînes d'événements préfixées par le navigateur peuvent être transmises à bind() méthode simultanément.

Déclenchement d'événement unique :

Pour garantir la Le gestionnaire ne se déclenche qu'une seule fois, Duck suggère d'utiliser la méthode .one() de jQuery :

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

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

Utilisation des événements jQuery modernes :

Il est important de noter que bind() a est obsolète dans jQuery 1.7. La méthode préférée est on(), et pour garantir que la fonction de rappel ne se déclenche qu'une seule fois, utilisez off().

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

En comprenant ces méthodes, les développeurs peuvent exécuter efficacement des actions lorsque les transitions et les animations CSS3 sont terminées, ce qui permet pour des expériences Web plus réactives et immersives.

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!