Continuer avec notre exercice d'animation de la première partie précédente.
Nous allons ajouter quelques animations à notre application angulaire.
En particulier, nous ajouterons une animation qui sera déclenchée
lorsque les changements de route se produiront dans notre application d'une seule page.
Nous allons également ajouter dans une animation qui permet à
une vue d'être affichée lorsque les données sont récupérées du côté serveur,
donc lorsque vous rejettez le spinner dans votre vue et ensuite le rendu de la vue,
nous voulons que la vue soit projetée sur l'écran
plutôt que simplement d'apparaître tous les d'un coup.
Donc, quelques nouvelles animations que nous allons ajouter dans cet exercice.
En chemin lorsque vous avez plusieurs animations dans votre application,
, il peut être préférable de refactoriser le code d'une manière plus
gérable plutôt que d'inclure fragmentée
chaque petit bit de déclencheur dans chacun des fichiers
dans nos composants de notre application angulaire.
Alors, faisons toutes ces étapes dans le cadre de la deuxième partie de l'exercice d'animation.
La première chose que je vais faire est que nous allons refactoriser
le code que nous avons déjà fait dans le cadre de cet exercice d'animations.
Cette approche que je vous illustre ici n'est que mon approche suggérée.
Vous n'avez pas nécessairement à suivre exactement de cette façon,
mais je pense que cela aide à organiser le code beaucoup mieux.
Donc, ce que je vais faire est comme si nous avions un dossier séparé pour les services,
nous avions un dossier séparé pour les ressources partagées et ainsi de suite,
Je vais créer un nouveau dossier nommé animations.
Nous allons y stocker tout le code lié à l'animation et ensuite l'utiliser en l'important
partout où cela est nécessaire dans nos composants dans notre application angulaire.
Donc, en allant à notre code,
dans le dossier de l'application, je vais créer un nouveau dossier et le nommer Animations.
Dans ce dossier Animations,
Je vais créer un nouveau fichier et faute d'un meilleur mot, je
l'appellerai app.animation.ts fichier.
Ensuite, à l'intérieur de cela, je vais importer
les différentes classes d'animations angulaires que j'ai faites dans le composant DishDetail.
Donc, en allant au composant DishDetail,
vous vous souviendrez que la première chose que j'ai faite
a été que j'ai ajouté cette ligne dans le composant DishDetail.
Je vais le découper du composant DishDetail et
au lieu de le coller dans les animations de l'application,
de sorte que partout où cette animation d'application est
incluse en l'important dans nos autres composants,
cela viendra automatiquement pour le droit là.
Maintenant, dans cette application animations,
je vais créer des fonctions d'usine qui exporteront les différents déclencheurs.
La première fonction d'usine que je vais créer
cette fonction d'exportation et l'appeler visibilité.
Cette fonction de visibilité retournera le code
correspondant au déclencheur que nous avons fait dans le composant DishDetail.
Donc, en revenant au composant DishDetail,
Je vais juste découper tout ce code pour le déclencheur d'ici, puis revenir au fichier
app animation.ts et ensuite le coller dans un endroit
juste là dans la fonction ici.
Ceci devient maintenant une fonction qui est disponible pour l'importation à partir de mon composant DishDetail.
Donc, revenant au composant DishDetail.
Maintenant, à l'endroit où j'ai importé le déclencheur et d'autres classes,
Je vais maintenant importer la visibilité
de l'application de l'animation, animation,
et donc cette fonction sera maintenant disponible pour moi dans mon code ici.
Donc, une fois que je fais cela dans mes animations,
, je peux simplement appeler cette fonction afin que je puisse dire
visibilité et puis le code de déclenchement devient maintenant partie de mon composant ici.
Maintenant, ce que je trouve est une meilleure façon d'organiser le code pour mes animations.
Maintenant, si j'ai besoin d'utiliser le même déclencheur dans un autre composant,
, je peux simplement suivre cette approche pour inclure cela dans mes autres composants aussi.
Sauvegardons les changements, puis allons prendre
un rapide coup d'oeil à notre application dans le navigateur.
Allez dans le navigateur, vous voyez que quand je vais au composant disque,
le composant disque est juste là et puis
il aura le même comportement d'animation qu'avant.
Donc, en refactorisant le code,
j'ai réussi à obtenir le code mieux organisé et
fonctionne toujours exactement de la même manière que la première partie de cet exercice.
Si vous aviez une seule animation utilisée en un seul endroit,
alors l'approche précédente fonctionne très bien, mais si vous avez
multiple et surtout si vous réutilisez le code dans de nombreux composants,
alors cette approche refactorisée est un bien meilleur moyen d'implémenter la solution.
La prochaine mise à jour que je vais faire est d'ajouter des animations sur les changements d'itinéraire.
Donc, quand je passe d'une vue à une autre vue, donc, par exemple,
de la maison au menu ou au menu à contacter ou vice versa,
alors je veux être en mesure d'animer ces changements dans mon application.
Donc, pour ce faire,
Je vais introduire une autre fonction dans le fichier app animation.ts.
Donc, en allant dans le fichier app animation.ts,
je vais exporter une autre fonction que j'appelle FlyInOut,
vous verrez pourquoi j'utilise ce nom ici.
Ensuite, cela retournerait une fonction qui est un déclencheur avec le nom FlyInOut.
Donc, à l'intérieur était trigger,
Je vais définir le code pour ce que ce déclencheur va faire.
Donc, ici, je vais définir un état ici avec le nom star,
donc peu importe quel état c'est,
ceci est applicable à n'importe quel état et ensuite je vais définir
certains styles ici et les deux styles que je définirai est l'opacité est un
et transform est TranslateX (0),
de sorte que
signifie qu'il est dans sa position normale dans ce cas.
Maintenant, quand je définit des transitions,
je peux aussi définir des transitions de cette façon.
Donc, si je dis entrer la transition,
la transition d'entrée est un raccourci pour dire aller de
état vide à l'un des états existants.
Donc, ce qui signifie que la vue entre dans mon application.
Alors entrez, ce qui signifie que maintenant quand je roule dans
une vue particulière dans mon application d'une seule page,
cette vue entrera dans la vue.
Donc, c'est pourquoi je peux appliquer la transition deux-points dans ce cas.
Maintenant, de même, il y a une autre transition appelée deux-points
leave que je peux appliquer lorsque vous sortez de
cette vue et que vous prenez la vue de la sortie du routeur de votre application.
Donc, nous allons faire à la fois entrer et l'autre qui est congé.
Donc, deux fonctions que je vais définir ici,
transition entrer et transition partir ici.
Alors, pour l'entrée,
qu'est-ce que je veux définir ?
Pour entrer, permettez-moi de définir la fonction ici,
et de même, pour laisser aussi,
je vais définir les fonctions ici.
Donc, créer cet échafaudage ici.
Maintenant, je peux entrer les informations que je veux dans ces transitions.
Donc, quand cette transition se produit,
Je vais commencer avec un style de transformation,
TranslateX moins 100 pour cent,
ce qui signifie que la vue est complètement hors de la vue ici.
Donc, vous commencez là à partir de moins 100 pour cent en ce moment.
Donc, quand vous entrez,
vous allez commencer par ça,
et ensuite aussi à ce stade,
je vais animer, et animer en 500.
Donc, quand je spécifie 500 comme ça,
vous pouvez même le faire de cette façon.
Alternativement, vous pouvez dire, entre guillemets,
« 500ms », puis vous pouvez même utiliser ease-in ou ease-out.
Donc, laissez-moi modifier ceci en
500ms ease-in parce que cette vue arrive.
Donc, nous allons faciliter la vue.
Donc, pour le congé, je vais appliquer la transition comme animation,
et puis je dirais 500 millisecondes, encore une fois, ease-out.
Donc, cette vue s'en va.
Donc, nous voulons faciliter cette vue.
Ensuite, dans ce cas,
le style que j'applique
est transform,
TranslateX 100 pour cent.
Donc, cette vue disparaîtra complètement de l'écran là-bas.
TranslateX 100 pour cent.
Aussi, je vais mettre l'opacité à zéro.
Donc, disparaît complètement de l'écran.
Donc, cette animation va ajouter une bonne nouvelle fonctionnalité ici.
Maintenant, pour celui-ci aussi,
je peux ajouter, en commençant par une opacité de zéro, si vous préférez.
Ajoutons cela et voyons à quoi ça ressemble.
Donc, c'est le déclencheur FlyInOut que j'ai défini ici.
Maintenant, vous vous demandez évidemment,
comment puis-je utiliser ce FlyInOut et ensuite appliquer
ceci pour router des transitions dans mon application ?
Donc, pour ce faire, nous allons aller, d'abord,
en commençant par le fichier de menu component.ts.
Je vais importer
le FlyInOut
de l'animation de l'application.
Ensuite, en allant au composant,
Je vais maintenant introduire une nouvelle propriété appelée hôte.
Je vais vous dire ce qui va en hôte dans un court moment.
Ensuite, nous allons également inclure la propriété animations,
qui est un tableau ici.
Ensuite, ici, j'utiliserai le FlyInOut que nous venons d'importer.
Donc, ce déclencheur d'animation sera appliqué pour ce composant multimédia.
Maintenant, au sein de l'hôte,
donc c'est ainsi que je m'assure que cette animation particulière se produit lorsque des changements de route se produisent.
Donc, dans cet hôte ici,
Je fournit ceci comme disant,
@flyInOut et dis vrai,
et cela devrait être inclus dans des citations aussi,
@flyInOut, true, puis style,
bloc d'affichage.
Donc, ces deux devraient être appliqués à l'intérieur de la propriété host ici.
Maintenant, quand nous faisons cela, mon composant de menu va maintenant commencer à animer
lorsque je roule dans le composant de menu,
et ensuite quand je quitte le composant de menu.
Maintenant, je vais appliquer la même chose aux composants restants de mon application Angular.
Donc, ce que je vais faire est,
Je vais juste copier ceci,
et ensuite nous appliquerons ceci au composant about.
Donc, je vais aller à la composante about.
Dans le décorateur de composant,
J'ai inclus les informations ici,
et vous voyez la ligne squiggly rouge qui me rappelle que j'ai besoin d'importer
FlyInOut à partir d'animations, d'animation d'application.
Donc, la même approche, sur le composant,
puis dans le composant de contact aussi, la même chose,
puis appliquer les propriétés hôte et animation au décorateur de composant,
et ensuite qu'avons-nous d'autre ?
Le composant maison. Allons à la composante maison et répétons la même chose ici.
Je vais ajouter dans l'hôte et la propriété animations,
, puis aller de l'avant et importer
FlyInOut, à partir de l'animation de l'application.
On en a manqué un ? Oh, nous devons également mettre à jour le composant de détail du plat.
Alors, laissez-moi passer à la composante détail du plat.
Puisque nous avons déjà la visibilité là-bas,
Je vais juste importer le FlyInOut.
Alors, puisque nous avons déjà mis en place les parties restantes ici,
Je vais entrer et coller ce code,
et évidemment, j'ai deux animations ici.
Permettez-moi de couper la visibilité d'ici et ensuite d'ajouter
dans l'autre animation,
, puis de couper ceci pour que j'aie une propriété d'animation unique avec
à la fois FlyInOut et les fonctions de visibilité étant incluses et appelées là,
et ensuite la propriété hôte.
Maintenant, sauvegardons les changements et jetons un coup d'œil à
la nouvelle animation que nous venons d'appliquer à nos composants.
En commençant par la vue de la maison.
Donc, nous avons la vue de la maison en cours de rendu ici.
Laissez-moi maintenant passer rapidement à la vue À propos,
et puis vous voyez que la vue À propos glisse juste alors que
la vue Accueil glisse dans l'écran ici.
De même, lorsque je vais au menu,
, vous verrez que la vue Menu glisse alors que la vue A propos diapositive.
C'est si rapide que vous ne le remarquez pas en tant que tel.
De même, pour la vue Contact,
, vous voyez la vue contact glisser dans.
Donc, ce genre d'animation peut être ajouté en utilisant
cette approche que nous venons d'illustrer pour votre application Angular.
Nous n'avons pas encore fini. Nous ferons encore une animation dans notre application.
Pour illustrer ce que je voudrais faire dans la prochaine animation,
regardons rapidement le composant menu.
Donc, vous voyez que lorsque le composant de menu,
lorsque le spinner tourne et est ensuite remplacé par la vue,
la vue apparaît soudainement sur l'écran,
et c'est un peu gênant pour l'œil.
Vous ne le remarquerez peut-être pas.
Vous en êtes peut-être très heureux.
Mais nous pouvons ajouter d'une manière d'assouplir dans
cette vue lorsque les données sont récupérées du serveur et que la vue est rendue dans.
Donc, quand la variable du plat dans mon fichier de menu component.ts ne devient pas nulle,
alors le spinner sera caché et ensuite la vue du plat,
le menu est construit puis aménagé.
Donc, nous voulons que cela se facilite dans l'écran.
Donc, ajoutons une animation supplémentaire pour que les deux dans le composant de menu.
Nous appliquerons également la même chose dans le composant détail du plat.
Nous utiliserons également la même chose dans le composant Accueil et le composant A propos,
où nous allons récupérer les données afin d'afficher la liste des leaders.
Donc, où que vous récupérez des données du serveur et que vous tracez la vue,
quand la vue apparaît,
nous voulons faciliter la vue en utilisant cette nouvelle animation que je vais créer ensuite.
Aller au fichier app animation.ts,
Je vais ajouter une autre fonction ici,
et laissez-moi l'appeler expansion.
Cette fonction développera la vue qui est mise en page
après que les données sont récupérées du côté serveur.
Donc, cette vue, encore une fois,
Je vais retourner un déclencheur ici.
Je vais nommer le déclencheur comme expand,
et ce déclencheur va créer.
Comment définissons-nous ce déclencheur.
Donc, à l'intérieur de ce déclencheur, nous allons inclure un état avec étoile là-dedans.
Donc, peu importe quel état c'est.
Tous les états seront rendus avec le style comme
opacité une transformation traduite x 0.
Donc, il est affiché à droite et au centre dans mon application.
Ça devrait être une accolade là.
Je regardais et j'ai dit,
Pourquoi montre-t-il une ligne rouge squiggly.
Donc, quand vous tapez très vite, vous faites souvent des erreurs là-bas.
Donc, au lieu d'un crochet carré,
qui devrait être une accolade là.
Donc, c'est l'état.
Donc, n'importe quel état qu'il sera complètement visible et centré là où il devrait être centré.
Maintenant, laissez-moi déclencher une transition.
Maintenant, cette transition ne sera déclenchée que
lors de l'entrée lorsque la vue est disposée à l'écran.
La partie de sortie que nous faisons déjà dans l'animation de route, donc nous n'avons pas besoin de cela.
Nous avons seulement besoin de l'inter partie pour cette vue parce que
la vue est rendue sur cet écran là-bas.
Donc, dans l'entrée,
, je vais définir la transition de manière appropriée.
Alors, dans la transition que dois-je faire ?
Je veux appliquer la même approche que j'ai utilisée avec la transition d'entrée ici.
Donc, je vais juste copier ceci et ensuite faire quelques ajustements mineurs au code là-bas.
Donc, pour la transition d'entrée ici aussi,
je veux appliquer la même chose.
Je dirai traduire Insta à partir de 100 pour cent.
Je vais juste utiliser 50 pour cent et ensuite je vais faire la traduction Y.
Donc, ce qui signifie que cette vue va tomber à partir du top 50 precent en commençant par
opacité zéro et ensuite je vais l'alléger dans un temps un peu plus rapide,
200 millisecondes et le faciliter dans notre application.
Maintenant, donc, vous voyez l'ajustement mineur du code ici.
Donc, traduisez moins 50 pour cent et opacité zéro et
il est allégé en 200 millisecondes et puis à ce moment-là,
je peux appliquer ce style comme ce même style.
Je vais postuler là. Donc, je vais simplement copier ce style et ensuite appliquer ce style là.
Donc, quand il sera assoupli,
il entrera et sera complètement visible où il devrait être.
Donc, c'est la fonction d'expansion que j'ai définie ici.
Alors, où puis-je utiliser cette fonction ?
Nous allons d'abord passer au composant de menu et dans le composant de menu,
Je vais maintenant importer aussi cela,
développer, puis l'ajouter dans mes animations et puis comment puis-je appliquer cette extension ?
Donc, aller à ce fichier de modèle de composants de menu.
Dans le fichier template,
Je vais appliquer le expand à
la liste de grille où j'applique ceci.
Donc, laissez-moi copier cela et puis aussi nous irons
vers le composant maison et dans le composant maison aussi,
Je vais inclure le expand et ensuite ajouter le expand à l'animation,
et ensuite aller au fichier de modèle de composants maison et ensuite j'appliquerai
qui développera aux composants de plat Carte MD,
à la carte MD composants de promotion et aussi à la carte MD leader
composants ici parce que tous ces
trois seront récupérés à l'avenir à partir du serveur et ensuite rendus.
Ainsi, les données des composants du plat sont déjà récupérées du serveur.
Maintenant, la même chose va au composant DishDetail.
Je vais ajouter dans le développement aux importations, puis ajouter
un développement dans l'animation va à la vue du composant DishDetail.
Avec une visibilité,
Je vais également appliquer l'expansion à
la carte div là, puis aux commentaires div aussi ici.
Ceci est dans le composant DishDetail.
Le composant contact n'a rien qui est récupéré du serveur.
Donc, je vais juste passer au composant about et dans le composant about aussi,
je vais inclure le expand et aussi dans les animations.
Aller au fichier de modèle about components ici ce test
ici qui montre que les leaders sont récupérés du côté serveur.
Donc, je vais appliquer l'expansion à ce sujet.
Sauvegardons les changements et ensuite allons jeter un coup d'oeil à notre application angulaire dans le navigateur.
Aller à notre application angulaire.
Maintenant, quand vous allez dans le modèle de maison,
vous pouvez voir que les cartes quand elles ont été récupérées,
ils ont glissé à mon point de vue là-bas.
Maintenant, de même quand vous allez au composant about,
vous voyez qu'une fois les données extraites du serveur,
alors le rendu des différents leaders est en train d'être
glisse toujours aussi lentement en position dans cette vue ici.
De même, en allant au composant de menu,
nous verrons un même comportement ici.
Donc, une fois que les données du menu sont prêtes,
le composant du menu glisse en place juste là.
Même chose avec les composants de détail du plat.
Alors, laissez-moi passer au composant DishDetail et vous verrez que
la vue glisse en place là mais l'autre animation
qui disparaissait et réapparaissait cette partie fonctionne toujours comme avant.
Donc, vous voyez que nous avons introduit une autre animation dans notre application Angular.
Maintenant, que vous aimiez cela ou que vous vouliez faire une façon plus élaborée de faire des animations,
certainement, vous pouvez devenir fou avec
faire beaucoup de choses différentes avec votre animation.
Changer de nombreuses propriétés différentes dans les styles comme de la façon dont vous aimez et ainsi de suite.
Mais j'ai senti que quelques animations subtiles ici et là contribueront à améliorer l'interface utilisateur pour mon application angulaire.
Donc, j'ai ajouté deux nouvelles animations à mon application Angular.
Avec cela, nous terminons la deuxième partie de notre exercice d'animations.
J'espère qu'avec ces deux parties exercice,
vous avez mieux compris comment utiliser les animations
dans votre application Angular.
C'est le bon moment pour vous de faire un commit git avec le message, animations deuxième partie.