[MUSIQUE]
Comme nous l'avons appris lors de la conférence précédente, les animations
ajoutent beaucoup de valeur intrinsèque à votre application.
Cela ajoute à une meilleure expérience utilisateur.
Maintenant, évidemment, cela ne signifie pas que vous lancez des animations partout
juste pour faire des animations.
Vous mettez des animations en place pour améliorer l'expérience utilisateur.
Dans cet exercice, nous allons faire notre première animation
au sein de notre application Angular que nous avons développée jusqu'à présent.
Et en chemin,
apprend comment les animations peuvent être implémentées dans une application Angular.
Nous allons continuer ce fil dans la deuxième partie de l'exercice où
nous allons ajouter plus d'animation à notre application Angular.
Lorsque nous avons commencé ce cours, dans le tout premier exercice avec Angular,
nous avions déjà ajouté dans le module d'animation dans notre application Angular
dans l'app.module.ts5, donc nous avons importé le module d'animation juste là.
Maintenant, l'étape suivante est d'aller aux composants et
puis ajouter dans l'animation partout où cela est nécessaire.
La première animation que nous allons ajouter est dans le composant dishdetail ici.
Donc, en allant au composant dishdetail,
permettez-moi d'importer quelques classes ici.
Je vais importer le déclencheur, l'état, le style
, animer et la transition à partir de.
@angular /animations.
Maintenant, une fois que nous les importons, nous pouvons les utiliser dans la construction de notre animation.
Alors, comment ajouter de l'animation à un composant ?
Nous allons ajouter les déclencheurs d'animation dans le décorateur de composant ici.
Donc entrer dans le décorateur de composant après les URL de styles,
et ajouter dans les animations comme une propriété à l'intérieur.
Et puis ici, je vais définir un déclencheur,
que j'appelle comme déclencheur de visibilité, et
je vais définir le déclencheur de visibilité à l'intérieur ici.
Maintenant, pour ce déclencheur de visibilité,
Je vais définir deux états, Je vais définir un état
comme montré et je vais définir un second état
comme, Hidden.
J'ai donc la flexibilité de définir mes états comme celui-ci.
Donc, pour l'état montré, qu'est-ce que je veux appliquer ?
Donc, pour l'état montré, j'appliquerai le style comme suit,
donc les styles que je vais appliquer pour
l'état montré, je vais faire la transformation, et
la transformation que je vais appliquer est une échelle de 1.0.
Donc, je veux le montrer en
sa taille normale et
une opacité de 0.
C'est donc ainsi que je définit le style montré.
Donc, et l'état caché que je définit le style comme,
Transform, je dirai échelle (0.5).
Vous pouvez jouer avec ces numéros
pour voir si l'animation est ce que vous désirez.
J'ai aussi joué avec ces numéros jusqu'à ce que j'ai obtenu quelque chose dont j'étais
satisfait.
Et 0, ou pour leur état montré plus loin, je mettrai l'opacité comme 1.
Opacité 1 signifie qu'il est complètement visible.
Opacité 0 signifie qu'il est complètement caché.
Maintenant, j'ai défini deux états ici, montrés et ici en état.
Maintenant, la transition entre ces deux états,
Je vais définir ici comme, chaque fois que je passe d'un état à n'importe quel état,
peu importe quel état à quel état je me déplace,
la transformation se fait avec une animation de 0,5 seconde,
ou 500 millisecondes.
Et je vais m'en sortir.
Donc ici, ce que je spécifie est que si je passe de l'état affiché à l'état caché ou
de l'état caché à l'état affiché, je me déplacerai dans les 0,5 secondes, ou 500 millisecondes.
Et puis, je vais faire la transition en facilitant l'entrée et la sortie, donc
ce ne sera pas une transition linéaire, ça va entrer lentement et
puis faciliter l'entrée et ensuite la sortie, donc
que ce ne sera pas une transition saccadée de l'un à l'autre.
Vous pouvez donc utiliser cette facilité d'entrée ou de sortie ou ease-in-out
pour spécifier comment vous voulez que la transition se produise.
Donc maintenant pour cette animation, j'ai spécifié
la visibilité comme déclencheur de cette animation.
Maintenant, pour que cette animation fonctionne correctement,
je vais aller dans mon DishDetailComponent, puis je vais spécifier,
dans ce composant, la valeur initiale de visibilité.
Donc, je dirai que la visibilité est
initialement définie sur montrée, puis,
chaque fois que je change d'un plat à l'autre.
Et cela arrive chaque fois que je vais chercher le plat ici.
Donc, chaque fois que je change le plat d'un plat à l'autre,
cela est causé chaque fois que le paramètre de route change.
Donc, à ce moment-là, je vais appliquer l'animation.
Je vais faire passer le déclencheur de l'état montré à l'état caché et
puis revenir de l'état caché à l'état montré lorsque le plat est disponible.
Donc, pour appliquer cette transformation.
Donc, je vais joindre cette déclaration à l'intérieur
un bloc ici dans cette fonction de flèche.
Et puis aussi définir cette visibilité ici comme.
Donc, quand je fais la transition d'un état à un autre, alors
alors que je commence à chercher les informations de plat du côté serveur,
je vais d'abord cacher le plat actuel en définissant la valeur de visibilité
sur caché, ce qui signifie que le plat actuel que
est affiché sera masqué de la vue.
Et quand le nouveau plat sera disponible, il reviendra dans la vue.
Donc pour ce faire, quand mon plat sera disponible dans la deuxième partie,
dans la partie subscribe, je dirai comme la dernière déclaration dans ce bloc,
Je dirai que cette visibilité est égale à celle montrée ici.
Donc, ma vue devient visible à ce moment-là.
Maintenant, je n'applique pas ceci au message d'erreur parce que je vais
appliquer cette visibilité uniquement aux parties de mon template
où mon plat est réellement montré.
Maintenant, s'il y a une erreur, alors je veux juste cacher le bon plat.
Ensuite, affichez uniquement le message d'erreur dans la vue là-bas.
Donc, avec ces changements à mon DishDetailComponent.
Donc, vous pouvez voir à nouveau, en expliquant cela une fois de plus.
Quand je commencerai la récupération du nouveau plat lors du changement des paramètres de la route,
Je mettrai la visibilité à caché afin
ce plat actuel qui est affiché dans la vue se cachera.
Et puis quand le nouveau plat sera disponible, de sorte que cela se produira quand
l'abonnement est appelé quand cet observable sera disponible.
Et puis, quand le plat devient disponible et ensuite,
j'ai mis ce plat au plat qui est revenu de l'observable.
À ce stade, je vais restaurer la visibilité à cet état montré.
Donc, que mon nouveau plat que j'ai récupéré peut être affiché à l'écran.
Avec ce changement, je vais maintenant au fichier template,
et dans le fichier template je vais appliquer
la visibilité aux deux plats ici.
Donc, le premier div où j'affiche le plat, je vais
appliquer le, Déclencheur de visibilité au plat.
Et puis je vais définir cela égal à,
Visibility, qui est la variable que j'ai définie dans le code là-bas.
Maintenant, j'applique ceci au plat ici, et applique aussi la même chose
à la deuxième div, où j'affiche les commentaires.
Et c'est tout.
Alors laissez-moi enregistrer tous les changements, puis nous irons et
jeter un oeil à la façon dont cette animation fonctionne dans notre exemple.
En allant dans le navigateur, maintenant je leur affiche le menu.
Laissez-moi sélectionner l'un des plats et ensuite passer à la vue des plats ici.
Donc, quand le plat est affiché, remarquez que chaque fois que je passe de
ce plat au plat suivant, donc en cliquant sur la droite.
Ensuite, ce plat disparaît, et quand le nouveau plat devient disponible,
la vue devient visible et le nouveau plat est affiché.
De même, je peux en faire un de plus et puis remarquer que le nouveau plat,
dès que l'information devient disponible, il redevient visible.
C'est donc la transition que j'applique dans cet exemple ici.
Donc, en revenant, vous pouvez voir le même comportement se répéter à nouveau.
Ce petit changement d'interface utilisateur
ajoute beaucoup de valeur à la façon dont l'utilisateur perçoit votre application.
Comme vous le savez, cela n'ajoute pas beaucoup à la fonctionnalité de votre application
elle-même, mais ajoute à une meilleure expérience utilisateur.
Et c'est là que nous appliquons des animations judicieusement dans notre application
pour rendre certaines expériences utilisateur plus significatives
pour l'utilisateur qui regarde votre application Angular, ou
visionnant votre application mobile, que nous verrons dans les cours ultérieurs.
Ceci termine cet exercice sur les animations.
Nous continuerons les explorations d'animations dans cette seconde partie
de l'exercice qui arrive juste après.
C'est le bon moment pour vous de faire un commentaire Git avec les animations de message,
première partie.
[MUSIQUE]