Comment puis-je détecter la fin des transitions CSS ?

Rappels sur les transitions CSS

Requête : Peut-on recevoir une notification lorsqu'une transition CSS est terminée ?

Réponse : Dans les navigateurs prenant en charge les rappels, un événement est déclenché à la fin de la transition. L'événement varie selon les navigateurs :

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

WebKit Problème TransitionEnd

Attention, webkitTransitionEnd peut ne pas toujours se déclencher. Cela se produit lorsque l'animation n'a aucun effet visible sur l'élément. Pour contourner ce problème, envisagez un délai d'attente pour déclencher le gestionnaire d'événements si l'événement n'est pas déclenché comme prévu.

Structure de code recommandée

var transitionEndEventName = "XXX"; // Specify the appropriate event name
var elemToAnimate = ... // Element to be animated
var done = false;
var transitionEnded = function() {
    done = true;
    // Code to execute when transition finishes
    elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Animation triggering code here

// Fallback for browsers without event notifications
setTimeout(function() {
    if (!done) {
        transitionEnded();
    }
}, XXX); // Calculate XXX based on animation time and grace period

Remarque : Reportez-vous à « Comment normaliser les fonctions de transition CSS3 dans les navigateurs ? » pour normaliser les noms d'événements de transition.

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!