🟢 Animations Simples

Information

Il s’agit du premier des deux challenges sur les animations. Le but de cette série est de maîtriser les animations en Angular.

Des animations bien conçues peuvent rendre votre application plus agréable et plus intuitive à utiliser, mais elles ne sont pas seulement cosmétiques. Les animations peuvent améliorer votre application et l’expérience utilisateur de plusieurs façons :

• Sans animations, les transitions de pages web peuvent sembler abruptes et désagréables.
• Le mouvement améliore grandement l’expérience utilisateur, les animations permettent donc aux utilisateurs de percevoir la réponse de l’application à leurs actions.
• De bonnes animations attirent intuitivement l’attention de l’utilisateur là où elle est nécessaire.

Je vous recommande de lire la documentation officielle. Vous y apprendrez tout ce qui est nécessaire pour réussir ce challenge.

Vous pouvez également regarder cet exemple fonctionnel et ce repertoire git pour vous inspirer.

Énoncé

L’objectif de ce challenge est d’ajouter des animations qui doivent être déclenchées lorsque l’utilisateur arrive sur la page ou la recharge.

Contraintes

• N’utilisez aucun CSS et utilisez l’API intégrée d’Angular @angular/animations.
• Ne déclenchez pas les animations avec un bouton comme dans les exemples, mais lorsque l’utilisateur entre ou recharge la page.

Niveau 1

Ajoutez une animation de fondu ou de déplacement pour les paragraphes sur le côté gauche.

Niveau 2

Ajoutez une animation en cascade pour la liste sur le côté droit.