Comment puis-je recevoir des notifications lorsque les transitions CSS se terminent sur différents navigateurs ?

Notifications pour l'achèvement de la transition CSS

Lorsque les transitions CSS se terminent, il est utile de recevoir des notifications pour lancer des actions post-transition. Heureusement, les navigateurs fournissent des événements qui se déclenchent à la fin de la transition, permettant aux développeurs d'enregistrer des fonctions de rappel.

Noms d'événements spécifiques au navigateur

Cependant, les navigateurs utilisent des noms d'événements dépendants du navigateur :

• Navigateurs Webkit (Chrome, Safari) : webkitTransitionEnd
• Firefox : transitionend
• IE9 : msTransitionEnd
• Opera : oTransitionEnd

pièges du webkitTransitionEnd

Notez que webkitTransitionEnd peut ne pas toujours se déclencher, en particulier lorsque les effets d'animation n'ont pas impact notable sur l’élément. Pour atténuer cela, utilisez un délai d'attente pour exécuter le gestionnaire d'événements s'il ne se déclenche pas comme prévu.

Exemple de code

Le code suivant démontre l'utilisation de cet événement :

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Remarque sur la compatibilité du navigateur

Pour déterminer le nom d'événement de transition approprié pour un navigateur spécifique, utilisez la méthode mise en évidence dans « Comment normaliser Fonctions de transition CSS3 dans tous les navigateurs ?".

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!