Transitioncancel - Micro-onde

Pour cet exercice vous devez compléter l’animation d’un four micro-onde afin de le rendre plus réaliste grâce aux événements transitionstart, transitionend et transitioncancel.

Aperçu du résultat 👇

Matériel

Pen de départ 

Médias 🖼️

Ding
https://ex.smnarnold.com/animations-transitions/ding.mp3
Heating
https://ex.smnarnold.com/animations-transitions/mirco-onde.mp3

Requis

  1. Lorsque la transition sur l'élément .progress débute, il faut déclencher le son en pièce jointe Heating .

  2. Lorsque la transition est terminée, retirez la classe .running sur l'élément <body>, mettre le son Heating à pause et déclencher le son Ding.

  3. Si l'usager appuie sur le bouton Clear pendant la transition, mettre le son Heating à pause, retirez la classe .running de l'élément <body>. La transition sera ainsi cancellée. Écoutez cet événement et ajoutez la classe .cancel au <body> lorsqu'il se produit.

Notes de cours 📚