Dans le cours : Angular : Dynamisation des applications

Appliquer des transitions - Tutoriel Angular

Dans le cours : Angular : Dynamisation des applications

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Appliquer des transitions

“

Pour notre application, on a maintenant des transitions. Lorsqu'on passe un contact de favori à non-favori. Vous pouvez voir quand j'utilise mon bouton, le changement de couleur du texte ne se fait pas brutalement. Mais si on regarde une card-contact.component.ts, on a un peu de code superflu, c'est-à-dire qu'on écrit deux fois notre transition. C'est pas optimal pour le moment. On sait très bien que dans les deux cas, on va utiliser la même animation, les mêmes paramètres. Pour ceux qui ne connaissent pas tout ce qui est ease-in, ease-out, etc., ce sont des cubic-bezier. Pour mieux comprendre leur fonctionnement, vous pouvez, sur votre navigateur, aller sur le site cubic-bezier. Ce site vous permet de mieux comprendre le fonctionnement de ces fonctions de cubic-bezier dont vous pouvez voir ease, linear, ease-in, ease-out, ease-in-out et vous pouvez du coup, lancer l'animation et voir le fonctionnement de ces animations, donc par exemple, en augmentant la durée. Et même si vous le souhaitez, modifier la fonction de cubic-bezier pour qu'elle corresponde à ce que vous, vous attendez. Revenons maintenant sur notre code. Comme je le disais, on a du code superflu et nos animations sont les mêmes pourtant, comme on peut le voir : 300 millisecondes ease-in pour les deux. Bien sûr, pour l'entrée, c'est-à-dire de False à True, vous utiliserez ease-in et là, on pourrait utiliser ease-out pour sortir. Mais ça fait quand même beaucoup de code pour dire ça, donc ce qu'on peut faire, c'est enlever cette deuxième ligne, spécifier ease et dire ici, de False vers True. Dans ce cas-là, si on sauvegarde, vous pouvez voir que mon animation fonctionne pour les deux fonctions : la mise en Favoris ou retirer le contact des Favoris. Mais ça reste encore toujours superflu et vous avez un autre moyen de faire ça, c'est cette méthode. Avec cette méthode, vous dites que du passage de True à False et du passage de False à True, j'applique cette animation. Grâce à ça, votre code est quand même beaucoup plus lisible, vous simplifiez aussi son écriture et le fonctionnement reste le même.

Table des matières