AddEventListener() animation & transition

Pour le meilleur et pour le pire, le CSS et le JavaScript se comportent comme deux entités séparées.

Par exemple, au survole il est possible de déclencher une transition CSS d’une demi-seconde, ainsi qu’un événement JavaScript devant s’exécuter à la fin de celle-ci, il est alors tentant d’utiliser setTimeout(function() {...}, 500). Cependant, puisque le CSS et le JavaScript sont distincts, il est probable qu’ils n’arrivent pas tout à fait en même temps au décompte d’une demi-seconde ⏱️.

Imaginez un instant que vous et un de vos amis tentiez de faire un décompte:

  • 1 milliseconde

  • 2 millisecondes…

Ainsi de suite jusqu’à 500 millisecondes.

Il est probable que vous terminiez dans un délai similaire, mais peu probable que vous terminiez exactement en même temps.

Heureusement, il est possible d'écouter en JavaScript via addEventListener() des événements de type animations et transitions CSS.

CodePen | smnarnold 👀

À gauche, addEventListener() sur la transition,
À droite, setTimeout().

End

  • animationend lorsqu'une animation se complète

  • transitionend lorsqu'une transition se complète

Si l'animation est cancellée, l’événement n’est pas déclenché. Par exemple, si un élément est animé lorsqu’il est survolé et que l’utilisateur cesse de le survoler avant la fin de ladite animation.

Par exemple, l'élément suivant a une transition au survole. Que cet élément se rend à la fin de sa transition (couvrir tout l'espace vide) ou que l'on cesse de le survolé avant, l'événement transitionend sera déclenché dès que l'élément aura atteint un taille correspondant à son point final ou son point de départ.

element.addEventListener("transitionend", function() {...});

CodePen | smnarnold 👀

Start

  • animationstart lorsqu'une animation démarre

  • transitionstart lorsqu'une transition démarre

Par exemple, si un élément possède une propriété animation-delay, il est pratique de pouvoir synchroniser avec le début réel de l’animation.

transitionrun

  • transitionrun lorsqu'une transition débute (incluant le délais si présent)

Contrairement aux événements de type Start, les événements de type Run sont déclenchés immédiatement, même si une propriété transition-delay est présente.

animationiteration

  • animationiteration lorsqu'une animation se répète

Contrairement aux événements de type Start, les événements de type Iteration sont déclenchés à chaque répétition d'une animation si une propriété animation-repeat plus grande que 1 est présente.

Cancel

  • animationcancel lorsqu'une animation est annulée avant sa fin

  • transitioncancel lorsqu'une transition est annulée avant sa fin

Par exemple, si un élément est animé lorsqu’il est survolé et que l’utilisateur cesse de survoler l’élément avant la fin de l’animation.