Comprendre les événements de transition CSS3

Les transitions CSS3 permettent des animations fluides et des effets visuels sur les éléments Web. Pour améliorer l'expérience utilisateur et synchroniser les actions avec ces transitions, il est important de suivre leur progression. Cet article aborde la question de savoir si CSS3 fournit des événements pour vérifier quand une transition commence ou se termine.

Le projet de transitions CSS du W3C

Le projet de transitions CSS du W3C établit qu'un La transition CSS déclenche les événements DOM correspondants. Pour chaque propriété de transition, un événement est généré. Cela permet aux développeurs d'exécuter des actions qui coïncident avec la fin de la transition.

WebKit

Sous WebKit, l'événement webkitTransitionEnd est déclenché une fois la transition terminée. La définition d'un écouteur d'événement JavaScript pour cet événement permet aux développeurs de détecter l'achèvement.

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Mozilla, Opera et Internet Explorer

La plupart des navigateurs prennent en charge un seul événement pour l'achèvement de la transition :

• Firefox : transitionend
• Opéra : oTransitionEnd
• WebKit : webkitTransitionEnd
• Internet Explorer : transitionend

Dans Internet Explorer, l'événement transitionend se déclenche uniquement lorsque la transition se termine avec succès ; le supprimer prématurément empêche le déclenchement de l'événement.

Rassembler le tout

En exploitant l'événement approprié en fonction du navigateur et en utilisant les écouteurs d'événements JavaScript, les développeurs peuvent surveiller l'événement. progression des transitions CSS3 et effectuer les actions nécessaires en synchronisation avec leur achèvement.