AnimationEnd & TransitionEnd

3

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 des événements liés aux animations et transitions CSS.

À gauche, l'événement CSS lié à la transition CSS est écouté, tandis qu'à droite le même résultat a été recréé avec setTimeout.

Voir le CodePen de Simon Arnold (@smnarnold).

animationend & transitionend

Déclenché lorsqu’une animation/transition est terminée.

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.

Une transition CSS n'est jamais réellement cancellée, car lorsqu'une transition est entamée, peu importe ce qui ce produit, elle transitionnera soit vers son objectif où son point de départ.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus sur transitionend, voir MDN🦖

Exercice sur transitionend codepen.io/smnarnold/pen/JjdaLWy

animationstart & transitionstart

Déclenché lorsqu’une animation/transition commence. 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.

Pour en savoir plus sur transitionstart, voir MDN🦖

Exercice sur transitionstart codepen.io/smnarnold/pen/LYVJdzQ

animationcancel & transitioncancel

Déclenché lorsqu’une animation/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.

Malheureusement, sur certains navigateurs, cet événement se déclenche aussi lorsqu’une animation/transition se termine. Il est donc conseillé de comparer la propriété elapsedTime de l’objet event retourné et de ne déclencher l’action que si elapsedTime est inférieur à la durée normale de l’animation.

Pour en savoir plus sur transitioncancel, voir MDN🦖

Exercice sur transitioncancel codepen.io/smnarnold/pen/NWqLeWx

animationrun & transitionrun 🏃

Déclenché lorsqu’une animation/transition commence. Contrairement à animationstart & transitionstart, animationrun & transitionrun sont déclenchés immédiatement, même si une propriété animation-delay est présente sur l’animation.

Pour en savoir plus sur transitionrun, voir MDN🦖

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme