Débuter avec les animations - Angular avancé

Et ça y est, vous avez déjà bien avancé dans Angular, et vous souhaitez faire plus. Vous ne souhaitez pas utiliser les animations css. Et pourtant, vous souhaitez animer vos composants, leurs contenus ? Les animations css sont faites pour vous !

Déclaration dans chaque composant

Toute animation doit être déclarer dans la partie declaration de chaque composant.

• Deux choix se présentent à vous :
  Déclaration complète dans chaque composant
• Création d’animations partagées dans un fichier dédié

Architecture d’une animation

Tout commence par un déclencheur

• Chaque animation déclarée est réprésentée par un trigger (déclencheur).
  Chaque trigger va paramétrer toute l’animation.
• Elle porte un nom et contient :
  Des états
• Des transitions

Etat de transition

Chaque état définit la fin d’une transition.
On va pouvoir lui préciser des règles css pour animer les composants HTML.

Les états ne sont pas obligatoires dans un déclencheur.
Cependant, elles permettent de définir différents étapes dans une animation.

Définition de transition

Chaque transition définit des règles de passage d’un état à un autre.
Dans chaque transition, nous allons pouvoir définir des animations (une durée, un temps d’animation) pour arriver à un nouvel état.

Un exemple simple d’animation

Explication :

Nous définissons deux états : open1 et close1.
Pour chaque état, nous définissons les règles css de fin de transition.

Puis, nous déclarons deux transitions : passage de l’état open1 à close1, et l’opposé.
On y note une animation d’une durée de 1 seconde ou de 0.5 seconde.

Reste un point à définir … comment appeler l’animation du côté template ?

Appel d’une animation côté template

L’animation va être appelée dans une balise HTML ou Angular.
Puis, nous pouvons changer l’état d’une animation en lui passant une valeur, exactement comme on passe une information en Input à un composant enfant.

Nous notons ici l’appel spéciale d’une animation : [@monAnimation].

Cependant, une animation peut aussi être appelée sans les []. Elle servira alors sans pouvoir changer d’état.

Dans l’exemple ci-dessus, nous notons qu’une variable ‘state’, qui est défini dans le composant, va changer de valeur.
Cette valeur est bindée, donc elle va activer le changement d’état. Elle va donc déclencher les transitions !

Aller plus loin avec les animations

Donner un rythme avec les keyFrames

Si vous souhaitez changer le rythme auto-calculé des animations, vous pouvez définir des keyFrames pour préciser le rythme.
Ce rythme est représenté par des keyFrames. Chaque keyFrame définir le pourcentage du temps (valeur comprise entre 0 et 1) où la keyFrame va s’activer.

Filtrer et améliorer les animations

Requêtes avec query

Avec query vous allez pouvoir décider sur quels éléments enfants l’animation va se déclencher.
Vous allez aussi pouvoir y préciser des événements (comme :input, lors d’une saisie dans un champ).
En somme, c’est une règle CSS, une requête CSS.

Tu as le swag baby ?

Avec swagger, vous allez aussi pouvoir choisir le rythme de l’animation, et quand elle va se déclencher !
A vous les animations plus stylées !