Comment puis-je détecter de manière fiable la fin des transitions CSS dans les navigateurs ?

Transitions CSS basées sur des événements : détection de l'achèvement d'une transition

Lorsque vous travaillez avec des transitions CSS, il est souvent souhaitable de recevoir une notification lorsque la transition est terminée. complété. Heureusement, les navigateurs modernes proposent des événements qui se déclenchent à la fin des transitions, facilitant ainsi la mise en œuvre de la fonctionnalité de rappel.

Noms des événements dans les navigateurs

Le nom spécifique de l'événement pour l'achèvement de la transition varie selon les navigateurs. navigateurs :

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

Implémentation de la gestion des événements

Pour implémenter une fonction de rappel lors des transitions CSS terminé, suivez ces étapes :

1. Déterminez le nom d'événement de transition approprié pour le navigateur utilisé.
2. Ajoutez un écouteur d'événement à l'élément subissant la transition :

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

3. Définissez la fonction de rappel transitionEnded pour effectuer les actions souhaitées lors de la transition se termine.

Cependant, il est important de noter que l'événement webkitTransitionEnd ne se déclenche pas toujours de manière cohérente. Pour tenir compte de cela, il est recommandé de définir un délai d'attente pour appeler le gestionnaire d'événements s'il ne se déclenche pas comme prévu.

Délai d'expiration de secours

setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, requiredTimeForAnimation);

En incorporant le délai d'attente de secours, vous pouvez vous assurer que le rappel est exécuté même si l'événement de transition ne le fait pas fire.

Obtention du nom de l'événement de transition

La méthode décrite dans la réponse à la question « Comment normaliser les fonctions de transition CSS3 dans les navigateurs ? » peut être utilisé pour déterminer le nom de l'événement de transition pris en charge par le navigateur actuel.

Ressources supplémentaires

• Gestion des transitions avec CSS3
• Événements de transition CSS3

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!