1
00:00:03,680 --> 00:00:09,920
Continuer avec notre exercice d'animation de la première partie précédente.

2
00:00:09,920 --> 00:00:15,470
Nous allons ajouter quelques animations à notre application angulaire.

3
00:00:15,470 --> 00:00:19,515
En particulier, nous ajouterons une animation qui sera déclenchée

4
00:00:19,515 --> 00:00:24,440
lorsque les changements de route se produiront dans notre application d'une seule page.

5
00:00:24,440 --> 00:00:28,125
Nous allons également ajouter dans une animation qui permet à

6
00:00:28,125 --> 00:00:32,595
une vue d'être affichée lorsque les données sont récupérées du côté serveur,

7
00:00:32,595 --> 00:00:39,535
donc lorsque vous rejettez le spinner dans votre vue et ensuite le rendu de la vue,

8
00:00:39,535 --> 00:00:42,395
nous voulons que la vue soit projetée sur l'écran

9
00:00:42,395 --> 00:00:45,710
plutôt que simplement d'apparaître tous les d'un coup.

10
00:00:45,710 --> 00:00:49,774
Donc, quelques nouvelles animations que nous allons ajouter dans cet exercice.

11
00:00:49,774 --> 00:00:54,440
En chemin lorsque vous avez plusieurs animations dans votre application,

12
00:00:54,440 --> 00:00:57,800
, il peut être préférable de refactoriser le code d'une manière plus

13
00:00:57,800 --> 00:01:01,190
gérable plutôt que d'inclure fragmentée

14
00:01:01,190 --> 00:01:05,210
chaque petit bit de déclencheur dans chacun des fichiers

15
00:01:05,210 --> 00:01:09,460
dans nos composants de notre application angulaire.

16
00:01:09,460 --> 00:01:15,880
Alors, faisons toutes ces étapes dans le cadre de la deuxième partie de l'exercice d'animation.

17
00:01:15,880 --> 00:01:20,750
La première chose que je vais faire est que nous allons refactoriser

18
00:01:20,750 --> 00:01:26,705
le code que nous avons déjà fait dans le cadre de cet exercice d'animations.

19
00:01:26,705 --> 00:01:32,790
Cette approche que je vous illustre ici n'est que mon approche suggérée.

20
00:01:32,790 --> 00:01:36,080
Vous n'avez pas nécessairement à suivre exactement de cette façon,

21
00:01:36,080 --> 00:01:40,460
mais je pense que cela aide à organiser le code beaucoup mieux.

22
00:01:40,460 --> 00:01:45,050
Donc, ce que je vais faire est comme si nous avions un dossier séparé pour les services,

23
00:01:45,050 --> 00:01:49,040
nous avions un dossier séparé pour les ressources partagées et ainsi de suite,

24
00:01:49,040 --> 00:01:51,975
Je vais créer un nouveau dossier nommé animations.

25
00:01:51,975 --> 00:01:57,200
Nous allons y stocker tout le code lié à l'animation et ensuite l'utiliser en l'important

26
00:01:57,200 --> 00:02:03,065
partout où cela est nécessaire dans nos composants dans notre application angulaire.

27
00:02:03,065 --> 00:02:05,865
Donc, en allant à notre code,

28
00:02:05,865 --> 00:02:12,615
dans le dossier de l'application, je vais créer un nouveau dossier et le nommer Animations.

29
00:02:12,615 --> 00:02:15,115
Dans ce dossier Animations,

30
00:02:15,115 --> 00:02:20,540
Je vais créer un nouveau fichier et faute d'un meilleur mot, je

31
00:02:20,540 --> 00:02:26,940
l'appellerai app.animation.ts fichier.

32
00:02:27,060 --> 00:02:31,915
Ensuite, à l'intérieur de cela, je vais importer

33
00:02:31,915 --> 00:02:38,865
les différentes classes d'animations angulaires que j'ai faites dans le composant DishDetail.

34
00:02:38,865 --> 00:02:41,135
Donc, en allant au composant DishDetail,

35
00:02:41,135 --> 00:02:43,700
vous vous souviendrez que la première chose que j'ai faite

36
00:02:43,700 --> 00:02:46,640
a été que j'ai ajouté cette ligne dans le composant DishDetail.

37
00:02:46,640 --> 00:02:49,685
Je vais le découper du composant DishDetail et

38
00:02:49,685 --> 00:02:53,035
au lieu de le coller dans les animations de l'application,

39
00:02:53,035 --> 00:02:57,765
de sorte que partout où cette animation d'application est

40
00:02:57,765 --> 00:03:03,090
incluse en l'important dans nos autres composants,

41
00:03:03,090 --> 00:03:05,640
cela viendra automatiquement pour le droit là.

42
00:03:05,640 --> 00:03:07,750
Maintenant, dans cette application animations,

43
00:03:07,750 --> 00:03:12,000
je vais créer des fonctions d'usine qui exporteront les différents déclencheurs.

44
00:03:12,000 --> 00:03:14,495
La première fonction d'usine que je vais créer

45
00:03:14,495 --> 00:03:22,660
cette fonction d'exportation et l'appeler visibilité.

46
00:03:23,000 --> 00:03:27,290
Cette fonction de visibilité retournera le code

47
00:03:27,290 --> 00:03:32,070
correspondant au déclencheur que nous avons fait dans le composant DishDetail.

48
00:03:32,070 --> 00:03:34,455
Donc, en revenant au composant DishDetail,

49
00:03:34,455 --> 00:03:44,520
Je vais juste découper tout ce code pour le déclencheur d'ici, puis revenir au fichier

50
00:03:44,520 --> 00:03:48,800
app animation.ts et ensuite le coller dans un endroit

51
00:03:48,800 --> 00:03:55,825
juste là dans la fonction ici.

52
00:03:55,825 --> 00:04:02,530
Ceci devient maintenant une fonction qui est disponible pour l'importation à partir de mon composant DishDetail.

53
00:04:02,530 --> 00:04:06,840
Donc, revenant au composant DishDetail.

54
00:04:06,840 --> 00:04:12,640
Maintenant, à l'endroit où j'ai importé le déclencheur et d'autres classes,

55
00:04:12,640 --> 00:04:19,030
Je vais maintenant importer la visibilité

56
00:04:19,030 --> 00:04:30,475
de l'application de l'animation, animation,

57
00:04:30,475 --> 00:04:35,300
et donc cette fonction sera maintenant disponible pour moi dans mon code ici.

58
00:04:35,300 --> 00:04:38,164
Donc, une fois que je fais cela dans mes animations,

59
00:04:38,164 --> 00:04:42,560
, je peux simplement appeler cette fonction afin que je puisse dire

60
00:04:42,560 --> 00:04:49,515
visibilité et puis le code de déclenchement devient maintenant partie de mon composant ici.

61
00:04:49,515 --> 00:04:55,360
Maintenant, ce que je trouve est une meilleure façon d'organiser le code pour mes animations.

62
00:04:55,360 --> 00:04:59,400
Maintenant, si j'ai besoin d'utiliser le même déclencheur dans un autre composant,

63
00:04:59,400 --> 00:05:07,545
, je peux simplement suivre cette approche pour inclure cela dans mes autres composants aussi.

64
00:05:07,545 --> 00:05:09,800
Sauvegardons les changements, puis allons prendre

65
00:05:09,800 --> 00:05:13,020
un rapide coup d'oeil à notre application dans le navigateur.

66
00:05:13,020 --> 00:05:18,460
Allez dans le navigateur, vous voyez que quand je vais au composant disque,

67
00:05:18,460 --> 00:05:21,215
le composant disque est juste là et puis

68
00:05:21,215 --> 00:05:24,810
il aura le même comportement d'animation qu'avant.

69
00:05:24,810 --> 00:05:26,640
Donc, en refactorisant le code,

70
00:05:26,640 --> 00:05:31,085
j'ai réussi à obtenir le code mieux organisé et

71
00:05:31,085 --> 00:05:36,385
fonctionne toujours exactement de la même manière que la première partie de cet exercice.

72
00:05:36,385 --> 00:05:41,875
Si vous aviez une seule animation utilisée en un seul endroit,

73
00:05:41,875 --> 00:05:44,870
alors l'approche précédente fonctionne très bien, mais si vous avez

74
00:05:44,870 --> 00:05:48,800
multiple et surtout si vous réutilisez le code dans de nombreux composants,

75
00:05:48,800 --> 00:05:55,160
alors cette approche refactorisée est un bien meilleur moyen d'implémenter la solution.

76
00:05:55,160 --> 00:06:00,250
La prochaine mise à jour que je vais faire est d'ajouter des animations sur les changements d'itinéraire.

77
00:06:00,250 --> 00:06:04,670
Donc, quand je passe d'une vue à une autre vue, donc, par exemple,

78
00:06:04,670 --> 00:06:11,145
de la maison au menu ou au menu à contacter ou vice versa,

79
00:06:11,145 --> 00:06:15,350
alors je veux être en mesure d'animer ces changements dans mon application.

80
00:06:15,350 --> 00:06:16,430
Donc, pour ce faire,

81
00:06:16,430 --> 00:06:22,480
Je vais introduire une autre fonction dans le fichier app animation.ts.

82
00:06:22,480 --> 00:06:24,980
Donc, en allant dans le fichier app animation.ts,

83
00:06:24,980 --> 00:06:33,210
je vais exporter une autre fonction que j'appelle FlyInOut,

84
00:06:34,570 --> 00:06:39,325
vous verrez pourquoi j'utilise ce nom ici.

85
00:06:39,325 --> 00:06:49,150
Ensuite, cela retournerait une fonction qui est un déclencheur avec le nom FlyInOut.

86
00:06:49,820 --> 00:06:52,380
Donc, à l'intérieur était trigger,

87
00:06:52,380 --> 00:06:58,710
Je vais définir le code pour ce que ce déclencheur va faire.

88
00:06:59,620 --> 00:07:10,015
Donc, ici, je vais définir un état ici avec le nom star,

89
00:07:10,015 --> 00:07:12,445
donc peu importe quel état c'est,

90
00:07:12,445 --> 00:07:16,820
ceci est applicable à n'importe quel état et ensuite je vais définir

91
00:07:16,820 --> 00:07:22,610
certains styles ici et les deux styles que je définirai est l'opacité est un

92
00:07:22,610 --> 00:07:26,600
et transform est TranslateX (0),

93
00:07:26,600 --> 00:07:36,915
de sorte que

94
00:07:36,915 --> 00:07:41,355
signifie qu'il est dans sa position normale dans ce cas.

95
00:07:41,355 --> 00:07:45,270
Maintenant, quand je définit des transitions,

96
00:07:45,270 --> 00:07:50,880
je peux aussi définir des transitions de cette façon.

97
00:07:50,990 --> 00:07:55,090
Donc, si je dis entrer la transition,

98
00:07:55,090 --> 00:07:59,240
la transition d'entrée est un raccourci pour dire aller de

99
00:07:59,240 --> 00:08:03,190
état vide à l'un des états existants.

100
00:08:03,190 --> 00:08:06,890
Donc, ce qui signifie que la vue entre dans mon application.

101
00:08:06,890 --> 00:08:10,655
Alors entrez, ce qui signifie que maintenant quand je roule dans

102
00:08:10,655 --> 00:08:15,450
une vue particulière dans mon application d'une seule page,

103
00:08:15,450 --> 00:08:18,500
cette vue entrera dans la vue.

104
00:08:18,500 --> 00:08:24,325
Donc, c'est pourquoi je peux appliquer la transition deux-points dans ce cas.

105
00:08:24,325 --> 00:08:27,725
Maintenant, de même, il y a une autre transition appelée deux-points

106
00:08:27,725 --> 00:08:31,790
leave que je peux appliquer lorsque vous sortez de

107
00:08:31,790 --> 00:08:40,580
cette vue et que vous prenez la vue de la sortie du routeur de votre application.

108
00:08:40,580 --> 00:08:46,950
Donc, nous allons faire à la fois entrer et l'autre qui est congé.

109
00:08:52,760 --> 00:08:56,555
Donc, deux fonctions que je vais définir ici,

110
00:08:56,555 --> 00:09:00,155
transition entrer et transition partir ici.

111
00:09:00,155 --> 00:09:01,730
Alors, pour l'entrée,

112
00:09:01,730 --> 00:09:04,150
qu'est-ce que je veux définir ?

113
00:09:04,150 --> 00:09:09,330
Pour entrer, permettez-moi de définir la fonction ici,

114
00:09:09,330 --> 00:09:11,800
et de même, pour laisser aussi,

115
00:09:11,800 --> 00:09:15,815
je vais définir les fonctions ici.

116
00:09:15,815 --> 00:09:18,955
Donc, créer cet échafaudage ici.

117
00:09:18,955 --> 00:09:25,810
Maintenant, je peux entrer les informations que je veux dans ces transitions.

118
00:09:25,810 --> 00:09:28,025
Donc, quand cette transition se produit,

119
00:09:28,025 --> 00:09:35,590
Je vais commencer avec un style de transformation,

120
00:09:36,920 --> 00:09:42,495
TranslateX moins 100 pour cent,

121
00:09:42,495 --> 00:09:47,680
ce qui signifie que la vue est complètement hors de la vue ici.

122
00:09:47,680 --> 00:09:52,205
Donc, vous commencez là à partir de moins 100 pour cent en ce moment.

123
00:09:52,205 --> 00:09:53,930
Donc, quand vous entrez,

124
00:09:53,930 --> 00:09:55,590
vous allez commencer par ça,

125
00:09:55,590 --> 00:09:58,710
et ensuite aussi à ce stade,

126
00:09:58,710 --> 00:10:03,530
je vais animer, et animer en 500.

127
00:10:03,530 --> 00:10:05,710
Donc, quand je spécifie 500 comme ça,

128
00:10:05,710 --> 00:10:07,960
vous pouvez même le faire de cette façon.

129
00:10:07,960 --> 00:10:10,995
Alternativement, vous pouvez dire, entre guillemets,

130
00:10:10,995 --> 00:10:16,900
« 500ms », puis vous pouvez même utiliser ease-in ou ease-out.

131
00:10:16,900 --> 00:10:19,400
Donc, laissez-moi modifier ceci en

132
00:10:19,400 --> 00:10:28,980
500ms ease-in parce que cette vue arrive.

133
00:10:28,980 --> 00:10:30,790
Donc, nous allons faciliter la vue.

134
00:10:30,790 --> 00:10:37,610
Donc, pour le congé, je vais appliquer la transition comme animation,

135
00:10:37,610 --> 00:10:45,640
et puis je dirais 500 millisecondes, encore une fois, ease-out.

136
00:10:45,640 --> 00:10:47,740
Donc, cette vue s'en va.

137
00:10:47,740 --> 00:10:50,350
Donc, nous voulons faciliter cette vue.

138
00:10:50,350 --> 00:10:52,365
Ensuite, dans ce cas,

139
00:10:52,365 --> 00:10:55,115
le style que j'applique

140
00:10:55,115 --> 00:11:03,880
est transform,

141
00:11:04,670 --> 00:11:09,590
TranslateX 100 pour cent.

142
00:11:09,590 --> 00:11:15,370
Donc, cette vue disparaîtra complètement de l'écran là-bas.

143
00:11:15,370 --> 00:11:18,055
TranslateX 100 pour cent.

144
00:11:18,055 --> 00:11:23,000
Aussi, je vais mettre l'opacité à zéro.

145
00:11:23,000 --> 00:11:25,615
Donc, disparaît complètement de l'écran.

146
00:11:25,615 --> 00:11:31,140
Donc, cette animation va ajouter une bonne nouvelle fonctionnalité ici.

147
00:11:31,140 --> 00:11:33,570
Maintenant, pour celui-ci aussi,

148
00:11:33,570 --> 00:11:40,825
je peux ajouter, en commençant par une opacité de zéro, si vous préférez.

149
00:11:40,825 --> 00:11:43,730
Ajoutons cela et voyons à quoi ça ressemble.

150
00:11:43,730 --> 00:11:48,895
Donc, c'est le déclencheur FlyInOut que j'ai défini ici.

151
00:11:48,895 --> 00:11:50,910
Maintenant, vous vous demandez évidemment,

152
00:11:50,910 --> 00:11:53,690
comment puis-je utiliser ce FlyInOut et ensuite appliquer

153
00:11:53,690 --> 00:11:56,650
ceci pour router des transitions dans mon application ?

154
00:11:56,650 --> 00:11:59,815
Donc, pour ce faire, nous allons aller, d'abord,

155
00:11:59,815 --> 00:12:03,055
en commençant par le fichier de menu component.ts.

156
00:12:03,055 --> 00:12:04,810
Je vais importer

157
00:12:04,810 --> 00:12:13,220
le FlyInOut

158
00:12:14,730 --> 00:12:25,820
de l'animation de l'application.

159
00:12:27,090 --> 00:12:31,230
Ensuite, en allant au composant,

160
00:12:31,230 --> 00:12:35,425
Je vais maintenant introduire une nouvelle propriété appelée hôte.

161
00:12:35,425 --> 00:12:39,445
Je vais vous dire ce qui va en hôte dans un court moment.

162
00:12:39,445 --> 00:12:42,939
Ensuite, nous allons également inclure la propriété animations,

163
00:12:42,939 --> 00:12:45,470
qui est un tableau ici.

164
00:12:45,470 --> 00:12:50,980
Ensuite, ici, j'utiliserai le FlyInOut que nous venons d'importer.

165
00:12:50,980 --> 00:12:59,325
Donc, ce déclencheur d'animation sera appliqué pour ce composant multimédia.

166
00:12:59,325 --> 00:13:00,660
Maintenant, au sein de l'hôte,

167
00:13:00,660 --> 00:13:07,975
donc c'est ainsi que je m'assure que cette animation particulière se produit lorsque des changements de route se produisent.

168
00:13:07,975 --> 00:13:11,215
Donc, dans cet hôte ici,

169
00:13:11,215 --> 00:13:15,560
Je fournit ceci comme disant,

170
00:13:17,070 --> 00:13:22,705
@flyInOut et dis vrai,

171
00:13:22,705 --> 00:13:28,730
et cela devrait être inclus dans des citations aussi,

172
00:13:29,370 --> 00:13:41,660
@flyInOut, true, puis style,

173
00:13:42,000 --> 00:13:45,595
bloc d'affichage.

174
00:13:45,595 --> 00:13:52,330
Donc, ces deux devraient être appliqués à l'intérieur de la propriété host ici.

175
00:13:52,330 --> 00:13:56,410
Maintenant, quand nous faisons cela, mon composant de menu va maintenant commencer à animer

176
00:13:56,410 --> 00:14:00,440
lorsque je roule dans le composant de menu,

177
00:14:00,440 --> 00:14:02,965
et ensuite quand je quitte le composant de menu.

178
00:14:02,965 --> 00:14:10,705
Maintenant, je vais appliquer la même chose aux composants restants de mon application Angular.

179
00:14:10,705 --> 00:14:12,720
Donc, ce que je vais faire est,

180
00:14:12,720 --> 00:14:15,260
Je vais juste copier ceci,

181
00:14:15,850 --> 00:14:20,910
et ensuite nous appliquerons ceci au composant about.

182
00:14:20,910 --> 00:14:23,545
Donc, je vais aller à la composante about.

183
00:14:23,545 --> 00:14:25,555
Dans le décorateur de composant,

184
00:14:25,555 --> 00:14:28,650
J'ai inclus les informations ici,

185
00:14:28,650 --> 00:14:34,070
et vous voyez la ligne squiggly rouge qui me rappelle que j'ai besoin d'importer

186
00:14:34,080 --> 00:14:42,255
FlyInOut à partir d'animations, d'animation d'application.

187
00:14:42,255 --> 00:14:46,410
Donc, la même approche, sur le composant,

188
00:14:46,410 --> 00:14:52,080
puis dans le composant de contact aussi, la même chose,

189
00:15:08,840 --> 00:15:17,980
puis appliquer les propriétés hôte et animation au décorateur de composant,

190
00:15:17,980 --> 00:15:21,660
et ensuite qu'avons-nous d'autre ?

191
00:15:21,660 --> 00:15:28,040
Le composant maison. Allons à la composante maison et répétons la même chose ici.

192
00:15:28,040 --> 00:15:33,385
Je vais ajouter dans l'hôte et la propriété animations,

193
00:15:33,385 --> 00:15:36,210
, puis aller de l'avant et importer

194
00:15:36,210 --> 00:15:50,210
FlyInOut, à partir de l'animation de l'application.

195
00:15:50,350 --> 00:15:56,235
On en a manqué un ? Oh, nous devons également mettre à jour le composant de détail du plat.

196
00:15:56,235 --> 00:15:58,360
Alors, laissez-moi passer à la composante détail du plat.

197
00:15:58,360 --> 00:16:00,840
Puisque nous avons déjà la visibilité là-bas,

198
00:16:00,840 --> 00:16:04,435
Je vais juste importer le FlyInOut.

199
00:16:04,435 --> 00:16:08,920
Alors, puisque nous avons déjà mis en place les parties restantes ici,

200
00:16:08,920 --> 00:16:12,665
Je vais entrer et coller ce code,

201
00:16:12,665 --> 00:16:17,125
et évidemment, j'ai deux animations ici.

202
00:16:17,125 --> 00:16:20,860
Permettez-moi de couper la visibilité d'ici et ensuite d'ajouter

203
00:16:20,860 --> 00:16:29,420
dans l'autre animation,

204
00:16:29,420 --> 00:16:35,040
, puis de couper ceci pour que j'aie une propriété d'animation unique avec

205
00:16:35,040 --> 00:16:40,780
à la fois FlyInOut et les fonctions de visibilité étant incluses et appelées là,

206
00:16:40,780 --> 00:16:42,630
et ensuite la propriété hôte.

207
00:16:42,630 --> 00:16:45,625
Maintenant, sauvegardons les changements et jetons un coup d'œil à

208
00:16:45,625 --> 00:16:51,370
la nouvelle animation que nous venons d'appliquer à nos composants.

209
00:16:51,370 --> 00:16:56,475
En commençant par la vue de la maison.

210
00:16:56,475 --> 00:16:59,000
Donc, nous avons la vue de la maison en cours de rendu ici.

211
00:16:59,000 --> 00:17:02,500
Laissez-moi maintenant passer rapidement à la vue À propos,

212
00:17:02,500 --> 00:17:05,800
et puis vous voyez que la vue À propos glisse juste alors que

213
00:17:05,800 --> 00:17:09,780
la vue Accueil glisse dans l'écran ici.

214
00:17:09,780 --> 00:17:11,810
De même, lorsque je vais au menu,

215
00:17:11,810 --> 00:17:16,190
, vous verrez que la vue Menu glisse alors que la vue A propos diapositive.

216
00:17:16,190 --> 00:17:20,240
C'est si rapide que vous ne le remarquez pas en tant que tel.

217
00:17:20,240 --> 00:17:22,740
De même, pour la vue Contact,

218
00:17:22,740 --> 00:17:24,710
, vous voyez la vue contact glisser dans.

219
00:17:24,710 --> 00:17:28,940
Donc, ce genre d'animation peut être ajouté en utilisant

220
00:17:28,940 --> 00:17:34,170
cette approche que nous venons d'illustrer pour votre application Angular.

221
00:17:34,170 --> 00:17:40,375
Nous n'avons pas encore fini. Nous ferons encore une animation dans notre application.

222
00:17:40,375 --> 00:17:44,955
Pour illustrer ce que je voudrais faire dans la prochaine animation,

223
00:17:44,955 --> 00:17:48,495
regardons rapidement le composant menu.

224
00:17:48,495 --> 00:17:50,780
Donc, vous voyez que lorsque le composant de menu,

225
00:17:50,780 --> 00:17:54,830
lorsque le spinner tourne et est ensuite remplacé par la vue,

226
00:17:54,830 --> 00:17:57,180
la vue apparaît soudainement sur l'écran,

227
00:17:57,180 --> 00:17:59,740
et c'est un peu gênant pour l'œil.

228
00:17:59,740 --> 00:18:01,230
Vous ne le remarquerez peut-être pas.

229
00:18:01,230 --> 00:18:03,725
Vous en êtes peut-être très heureux.

230
00:18:03,725 --> 00:18:07,340
Mais nous pouvons ajouter d'une manière d'assouplir dans

231
00:18:07,340 --> 00:18:12,235
cette vue lorsque les données sont récupérées du serveur et que la vue est rendue dans.

232
00:18:12,235 --> 00:18:20,625
Donc, quand la variable du plat dans mon fichier de menu component.ts ne devient pas nulle,

233
00:18:20,625 --> 00:18:27,290
alors le spinner sera caché et ensuite la vue du plat,

234
00:18:27,290 --> 00:18:30,320
le menu est construit puis aménagé.

235
00:18:30,320 --> 00:18:33,060
Donc, nous voulons que cela se facilite dans l'écran.

236
00:18:33,060 --> 00:18:38,820
Donc, ajoutons une animation supplémentaire pour que les deux dans le composant de menu.

237
00:18:38,820 --> 00:18:42,055
Nous appliquerons également la même chose dans le composant détail du plat.

238
00:18:42,055 --> 00:18:46,540
Nous utiliserons également la même chose dans le composant Accueil et le composant A propos,

239
00:18:46,540 --> 00:18:51,550
où nous allons récupérer les données afin d'afficher la liste des leaders.

240
00:18:51,550 --> 00:18:56,145
Donc, où que vous récupérez des données du serveur et que vous tracez la vue,

241
00:18:56,145 --> 00:18:57,740
quand la vue apparaît,

242
00:18:57,740 --> 00:19:03,275
nous voulons faciliter la vue en utilisant cette nouvelle animation que je vais créer ensuite.

243
00:19:03,275 --> 00:19:06,230
Aller au fichier app animation.ts,

244
00:19:06,230 --> 00:19:08,615
Je vais ajouter une autre fonction ici,

245
00:19:08,615 --> 00:19:14,750
et laissez-moi l'appeler expansion.

246
00:19:14,750 --> 00:19:18,200
Cette fonction développera la vue qui est mise en page

247
00:19:18,200 --> 00:19:22,370
après que les données sont récupérées du côté serveur.

248
00:19:22,370 --> 00:19:24,885
Donc, cette vue, encore une fois,

249
00:19:24,885 --> 00:19:28,370
Je vais retourner un déclencheur ici.

250
00:19:28,370 --> 00:19:32,280
Je vais nommer le déclencheur comme expand,

251
00:19:32,280 --> 00:19:37,690
et ce déclencheur va créer.

252
00:19:37,890 --> 00:19:40,590
Comment définissons-nous ce déclencheur.

253
00:19:40,590 --> 00:19:49,870
Donc, à l'intérieur de ce déclencheur, nous allons inclure un état avec étoile là-dedans.

254
00:19:49,870 --> 00:19:51,920
Donc, peu importe quel état c'est.

255
00:19:51,920 --> 00:20:00,580
Tous les états seront rendus avec le style comme

256
00:20:00,580 --> 00:20:10,420
opacité une transformation traduite x 0.

257
00:20:10,420 --> 00:20:16,430
Donc, il est affiché à droite et au centre dans mon application.

258
00:20:17,520 --> 00:20:20,990
Ça devrait être une accolade là.

259
00:20:20,990 --> 00:20:23,250
Je regardais et j'ai dit,

260
00:20:23,250 --> 00:20:25,735
Pourquoi montre-t-il une ligne rouge squiggly.

261
00:20:25,735 --> 00:20:29,560
Donc, quand vous tapez très vite, vous faites souvent des erreurs là-bas.

262
00:20:29,560 --> 00:20:31,070
Donc, au lieu d'un crochet carré,

263
00:20:31,070 --> 00:20:34,205
qui devrait être une accolade là.

264
00:20:34,205 --> 00:20:35,915
Donc, c'est l'état.

265
00:20:35,915 --> 00:20:44,925
Donc, n'importe quel état qu'il sera complètement visible et centré là où il devrait être centré.

266
00:20:44,925 --> 00:20:49,180
Maintenant, laissez-moi déclencher une transition.

267
00:20:49,180 --> 00:20:51,730
Maintenant, cette transition ne sera déclenchée que

268
00:20:51,730 --> 00:20:55,465
lors de l'entrée lorsque la vue est disposée à l'écran.

269
00:20:55,465 --> 00:21:00,740
La partie de sortie que nous faisons déjà dans l'animation de route, donc nous n'avons pas besoin de cela.

270
00:21:00,740 --> 00:21:03,060
Nous avons seulement besoin de l'inter partie pour cette vue parce que

271
00:21:03,060 --> 00:21:06,575
la vue est rendue sur cet écran là-bas.

272
00:21:06,575 --> 00:21:08,435
Donc, dans l'entrée,

273
00:21:08,435 --> 00:21:14,625
, je vais définir la transition de manière appropriée.

274
00:21:14,625 --> 00:21:18,860
Alors, dans la transition que dois-je faire ?

275
00:21:18,860 --> 00:21:27,260
Je veux appliquer la même approche que j'ai utilisée avec la transition d'entrée ici.

276
00:21:27,260 --> 00:21:32,600
Donc, je vais juste copier ceci et ensuite faire quelques ajustements mineurs au code là-bas.

277
00:21:32,600 --> 00:21:36,335
Donc, pour la transition d'entrée ici aussi,

278
00:21:36,335 --> 00:21:38,490
je veux appliquer la même chose.

279
00:21:38,490 --> 00:21:42,040
Je dirai traduire Insta à partir de 100 pour cent.

280
00:21:42,040 --> 00:21:46,630
Je vais juste utiliser 50 pour cent et ensuite je vais faire la traduction Y.

281
00:21:46,630 --> 00:21:52,460
Donc, ce qui signifie que cette vue va tomber à partir du top 50 precent en commençant par

282
00:21:52,460 --> 00:21:58,655
opacité zéro et ensuite je vais l'alléger dans un temps un peu plus rapide,

283
00:21:58,655 --> 00:22:04,200
200 millisecondes et le faciliter dans notre application.

284
00:22:04,200 --> 00:22:09,640
Maintenant, donc, vous voyez l'ajustement mineur du code ici.

285
00:22:09,640 --> 00:22:14,845
Donc, traduisez moins 50 pour cent et opacité zéro et

286
00:22:14,845 --> 00:22:21,025
il est allégé en 200 millisecondes et puis à ce moment-là,

287
00:22:21,025 --> 00:22:27,105
je peux appliquer ce style comme ce même style.

288
00:22:27,105 --> 00:22:32,240
Je vais postuler là. Donc, je vais simplement copier ce style et ensuite appliquer ce style là.

289
00:22:32,240 --> 00:22:34,440
Donc, quand il sera assoupli,

290
00:22:34,440 --> 00:22:40,115
il entrera et sera complètement visible où il devrait être.

291
00:22:40,115 --> 00:22:43,735
Donc, c'est la fonction d'expansion que j'ai définie ici.

292
00:22:43,735 --> 00:22:45,950
Alors, où puis-je utiliser cette fonction ?

293
00:22:45,950 --> 00:22:52,060
Nous allons d'abord passer au composant de menu et dans le composant de menu,

294
00:22:52,060 --> 00:22:55,530
Je vais maintenant importer aussi cela,

295
00:22:55,530 --> 00:23:04,595
développer, puis l'ajouter dans mes animations et puis comment puis-je appliquer cette extension ?

296
00:23:04,595 --> 00:23:08,160
Donc, aller à ce fichier de modèle de composants de menu.

297
00:23:08,160 --> 00:23:09,925
Dans le fichier template,

298
00:23:09,925 --> 00:23:12,840
Je vais appliquer le expand à

299
00:23:12,840 --> 00:23:20,435
la liste de grille où j'applique ceci.

300
00:23:20,435 --> 00:23:24,960
Donc, laissez-moi copier cela et puis aussi nous irons

301
00:23:24,960 --> 00:23:32,230
vers le composant maison et dans le composant maison aussi,

302
00:23:32,230 --> 00:23:42,590
Je vais inclure le expand et ensuite ajouter le expand à l'animation,

303
00:23:43,430 --> 00:23:49,475
et ensuite aller au fichier de modèle de composants maison et ensuite j'appliquerai

304
00:23:49,475 --> 00:23:57,060
qui développera aux composants de plat Carte MD,

305
00:23:57,060 --> 00:24:02,695
à la carte MD composants de promotion et aussi à la carte MD leader

306
00:24:02,695 --> 00:24:05,580
composants ici parce que tous ces

307
00:24:05,580 --> 00:24:09,880
trois seront récupérés à l'avenir à partir du serveur et ensuite rendus.

308
00:24:09,880 --> 00:24:15,075
Ainsi, les données des composants du plat sont déjà récupérées du serveur.

309
00:24:15,075 --> 00:24:20,080
Maintenant, la même chose va au composant DishDetail.

310
00:24:20,080 --> 00:24:27,000
Je vais ajouter dans le développement aux importations, puis ajouter

311
00:24:27,000 --> 00:24:35,530
un développement dans l'animation va à la vue du composant DishDetail.

312
00:24:35,530 --> 00:24:37,415
Avec une visibilité,

313
00:24:37,415 --> 00:24:40,095
Je vais également appliquer l'expansion à

314
00:24:40,095 --> 00:24:47,705
la carte div là, puis aux commentaires div aussi ici.

315
00:24:47,705 --> 00:24:50,720
Ceci est dans le composant DishDetail.

316
00:24:50,720 --> 00:24:54,530
Le composant contact n'a rien qui est récupéré du serveur.

317
00:24:54,530 --> 00:25:00,265
Donc, je vais juste passer au composant about et dans le composant about aussi,

318
00:25:00,265 --> 00:25:08,680
je vais inclure le expand et aussi dans les animations.

319
00:25:08,680 --> 00:25:12,870
Aller au fichier de modèle about components ici ce test

320
00:25:12,870 --> 00:25:17,190
ici qui montre que les leaders sont récupérés du côté serveur.

321
00:25:17,190 --> 00:25:20,310
Donc, je vais appliquer l'expansion à ce sujet.

322
00:25:20,310 --> 00:25:26,960
Sauvegardons les changements et ensuite allons jeter un coup d'oeil à notre application angulaire dans le navigateur.

323
00:25:26,960 --> 00:25:29,235
Aller à notre application angulaire.

324
00:25:29,235 --> 00:25:31,665
Maintenant, quand vous allez dans le modèle de maison,

325
00:25:31,665 --> 00:25:34,700
vous pouvez voir que les cartes quand elles ont été récupérées,

326
00:25:34,700 --> 00:25:38,070
ils ont glissé à mon point de vue là-bas.

327
00:25:38,070 --> 00:25:40,970
Maintenant, de même quand vous allez au composant about,

328
00:25:40,970 --> 00:25:45,050
vous voyez qu'une fois les données extraites du serveur,

329
00:25:45,050 --> 00:25:50,470
alors le rendu des différents leaders est en train d'être

330
00:25:50,470 --> 00:25:56,590
glisse toujours aussi lentement en position dans cette vue ici.

331
00:25:56,590 --> 00:25:58,905
De même, en allant au composant de menu,

332
00:25:58,905 --> 00:26:01,270
nous verrons un même comportement ici.

333
00:26:01,270 --> 00:26:03,595
Donc, une fois que les données du menu sont prêtes,

334
00:26:03,595 --> 00:26:07,065
le composant du menu glisse en place juste là.

335
00:26:07,065 --> 00:26:09,980
Même chose avec les composants de détail du plat.

336
00:26:09,980 --> 00:26:12,490
Alors, laissez-moi passer au composant DishDetail et vous verrez que

337
00:26:12,490 --> 00:26:15,250
la vue glisse en place là mais l'autre animation

338
00:26:15,250 --> 00:26:22,625
qui disparaissait et réapparaissait cette partie fonctionne toujours comme avant.

339
00:26:22,625 --> 00:26:32,755
Donc, vous voyez que nous avons introduit une autre animation dans notre application Angular.

340
00:26:32,755 --> 00:26:38,555
Maintenant, que vous aimiez cela ou que vous vouliez faire une façon plus élaborée de faire des animations,

341
00:26:38,555 --> 00:26:41,605
certainement, vous pouvez devenir fou avec

342
00:26:41,605 --> 00:26:45,395
faire beaucoup de choses différentes avec votre animation.

343
00:26:45,395 --> 00:26:52,395
Changer de nombreuses propriétés différentes dans les styles comme de la façon dont vous aimez et ainsi de suite.

344
00:26:52,395 --> 00:27:02,390
Mais j'ai senti que quelques animations subtiles ici et là contribueront à améliorer l'interface utilisateur pour mon application angulaire.

345
00:27:02,390 --> 00:27:08,195
Donc, j'ai ajouté deux nouvelles animations à mon application Angular.

346
00:27:08,195 --> 00:27:14,535
Avec cela, nous terminons la deuxième partie de notre exercice d'animations.

347
00:27:14,535 --> 00:27:18,240
J'espère qu'avec ces deux parties exercice,

348
00:27:18,240 --> 00:27:21,280
vous avez mieux compris comment utiliser les animations

349
00:27:21,280 --> 00:27:24,555
dans votre application Angular.

350
00:27:24,555 --> 00:27:32,040
C'est le bon moment pour vous de faire un commit git avec le message, animations deuxième partie.