1
00:00:03,680 --> 00:00:09,920
Continuando con il nostro esercizio di animazione dalla parte precedente.

2
00:00:09,920 --> 00:00:15,470
Aggiungeremo alcune altre animazioni alla nostra applicazione angolare.

3
00:00:15,470 --> 00:00:19,515
In particolare, aggiungeremo un'animazione che verrà attivata

4
00:00:19,515 --> 00:00:24,440
quando le modifiche del percorso si verificano all'interno della nostra applicazione a pagina singola.

5
00:00:24,440 --> 00:00:28,125
Aggiungeremo anche un'animazione che consente di

6
00:00:28,125 --> 00:00:32,595
visualizzare una vista quando i dati vengono recuperati dal lato server,

7
00:00:32,595 --> 00:00:39,535
quindi quando stai respingendo lo spinner nella tua vista e quindi eseguendo il rendering della vista,

8
00:00:39,535 --> 00:00:42,395
vogliamo che la vista venga proiettata sullo schermo

9
00:00:42,395 --> 00:00:45,710
piuttosto che semplicemente apparendo tutto un improvvisa.

10
00:00:45,710 --> 00:00:49,774
Quindi, un paio di nuove animazioni che aggiungeremo in questo esercizio.

11
00:00:49,774 --> 00:00:54,440
Lungo la strada quando hai più animazioni nella tua applicazione,

12
00:00:54,440 --> 00:00:57,800
potrebbe essere meglio refactoring il codice in un modo più

13
00:00:57,800 --> 00:01:01,190
gestibile piuttosto che includere frammentario

14
00:01:01,190 --> 00:01:05,210
ogni piccola parte di un trigger in ciascuno dei file all'

15
00:01:05,210 --> 00:01:09,460
interno dei nostri componenti della nostra applicazione angolare.

16
00:01:09,460 --> 00:01:15,880
Quindi, facciamo tutti questi passaggi come parte due dell'esercizio di animazione.

17
00:01:15,880 --> 00:01:20,750
La prima cosa che ho intenzione di fare è che refactoring

18
00:01:20,750 --> 00:01:26,705
il codice che abbiamo già fatto come parte uno di questo esercizio di animazioni.

19
00:01:26,705 --> 00:01:32,790
Questo approccio che ti sto illustrando qui è solo il mio approccio suggerito.

20
00:01:32,790 --> 00:01:36,080
Non devi necessariamente seguire esattamente in questo modo,

21
00:01:36,080 --> 00:01:40,460
ma sento che questo aiuta a organizzare il codice molto meglio.

22
00:01:40,460 --> 00:01:45,050
Quindi, quello che ho intenzione di fare è proprio come avevamo una cartella separata per i servizi,

23
00:01:45,050 --> 00:01:49,040
avevamo una cartella separata per le risorse condivise e così via,

24
00:01:49,040 --> 00:01:51,975
ho intenzione di creare una nuova cartella denominata animazioni.

25
00:01:51,975 --> 00:01:57,200
Noi memorizzeremo tutto il codice relativo all'animazione lì e poi fare uso di esso importandolo

26
00:01:57,200 --> 00:02:03,065
ovunque richiesto all'interno dei nostri componenti nella nostra applicazione angolare.

27
00:02:03,065 --> 00:02:05,865
Quindi, andando al nostro codice,

28
00:02:05,865 --> 00:02:12,615
all'interno della cartella dell'app creerò una nuova cartella e la chiamerò Animazioni.

29
00:02:12,615 --> 00:02:15,115
All' interno di questa cartella Animations,

30
00:02:15,115 --> 00:02:20,540
creerò un nuovo file e per mancanza di una parola migliore

31
00:02:20,540 --> 00:02:26,940
lo chiamerò app.animation.ts file.

32
00:02:27,060 --> 00:02:31,915
Quindi all'interno di questo, ho intenzione di importare

33
00:02:31,915 --> 00:02:38,865
le varie classi da animazioni angolari che ho fatto nel componente DishDetail.

34
00:02:38,865 --> 00:02:41,135
Quindi, andando al componente DishDetail,

35
00:02:41,135 --> 00:02:43,700
ricorderai che la prima cosa che ho fatto

36
00:02:43,700 --> 00:02:46,640
è stata ho aggiunto questa riga nel componente DishDetail.

37
00:02:46,640 --> 00:02:49,685
Ho intenzione di ritagliarlo dal componente DishDetail e

38
00:02:49,685 --> 00:02:53,035
invece incollarlo nelle animazioni dell'app, in

39
00:02:53,035 --> 00:02:57,765
modo che ovunque queste animazioni dell'app siano

40
00:02:57,765 --> 00:03:03,090
incluse importandole nei nostri altri componenti,

41
00:03:03,090 --> 00:03:05,640
questo verrà automaticamente per il giusto lì.

42
00:03:05,640 --> 00:03:07,750
Ora, all'interno di questa app animazioni,

43
00:03:07,750 --> 00:03:12,000
ho intenzione di creare alcune funzioni di fabbrica che esporteranno i vari trigger.

44
00:03:12,000 --> 00:03:14,495
La prima funzione di fabbrica che creerò

45
00:03:14,495 --> 00:03:22,660
questa funzione di esportazione e la chiamerò visibilità.

46
00:03:23,000 --> 00:03:27,290
Questa funzione di visibilità restituirà il codice

47
00:03:27,290 --> 00:03:32,070
corrispondente al trigger che abbiamo fatto nel componente DishDetail.

48
00:03:32,070 --> 00:03:34,455
Quindi, tornando al componente DishDetail,

49
00:03:34,455 --> 00:03:44,520
ho intenzione di ritagliare l'intero codice per il trigger da qui e poi tornare al

50
00:03:44,520 --> 00:03:48,800
file animation.ts app e quindi incollarlo in

51
00:03:48,800 --> 00:03:55,825
posizione proprio lì nella funzione qui.

52
00:03:55,825 --> 00:04:02,530
Questo ora diventa una funzione che è disponibile per l'importazione dal mio componente DishDetail.

53
00:04:02,530 --> 00:04:06,840
Quindi, tornando al componente DishDetail.

54
00:04:06,840 --> 00:04:12,640
Ora, nel posto in cui ho importato il trigger e altre classi,

55
00:04:12,640 --> 00:04:19,030
ora importerò la visibilità

56
00:04:19,030 --> 00:04:30,475
dall'app dell'animazione, dall'animazione

57
00:04:30,475 --> 00:04:35,300
e in modo che la funzione diventi ora disponibile per me all'interno del mio codice qui.

58
00:04:35,300 --> 00:04:38,164
Quindi, una volta che lo faccio all'interno delle mie animazioni,

59
00:04:38,164 --> 00:04:42,560
posso semplicemente chiamare quella funzione in modo da poter dire

60
00:04:42,560 --> 00:04:49,515
visibilità e quindi il codice trigger ora diventa parte del mio componente qui.

61
00:04:49,515 --> 00:04:55,360
Ora, questo trovo sia un modo migliore di organizzare il codice per le mie animazioni.

62
00:04:55,360 --> 00:04:59,400
Ora, se ho bisogno di usare lo stesso trigger in un altro componente,

63
00:04:59,400 --> 00:05:07,545
posso semplicemente seguire questo approccio per includerlo anche nei miei altri componenti.

64
00:05:07,545 --> 00:05:09,800
Salviamo le modifiche e poi andiamo a dare

65
00:05:09,800 --> 00:05:13,020
un'occhiata veloce alla nostra applicazione nel browser.

66
00:05:13,020 --> 00:05:18,460
Vai nel browser, vedi che quando vado al componente del disco,

67
00:05:18,460 --> 00:05:21,215
il componente del disco è proprio lì e poi

68
00:05:21,215 --> 00:05:24,810
avrà lo stesso comportamento di animazione di prima.

69
00:05:24,810 --> 00:05:26,640
Quindi, refactoring del codice,

70
00:05:26,640 --> 00:05:31,085
sono riuscito a ottenere il codice meglio organizzato e

71
00:05:31,085 --> 00:05:36,385
lavorare esattamente allo stesso modo come parte uno di questo esercizio.

72
00:05:36,385 --> 00:05:41,875
Se hai usato solo una singola animazione in un unico posto,

73
00:05:41,875 --> 00:05:44,870
l'approccio precedente funziona bene, ma se ne hai

74
00:05:44,870 --> 00:05:48,800
più e soprattutto se stai riutilizzando il codice in molti componenti,

75
00:05:48,800 --> 00:05:55,160
allora questo approccio refactored è un modo molto migliore per implementare la soluzione.

76
00:05:55,160 --> 00:06:00,250
Il prossimo aggiornamento che ho intenzione di fare è aggiungere animazioni sui cambiamenti di rotta.

77
00:06:00,250 --> 00:06:04,670
Quindi, quando passo da una vista a un'altra, quindi, ad esempio,

78
00:06:04,670 --> 00:06:11,145
da casa a circa o in procinto di menu o menu per contattare o viceversa,

79
00:06:11,145 --> 00:06:15,350
allora voglio essere in grado di animare queste modifiche all'interno della mia applicazione.

80
00:06:15,350 --> 00:06:16,430
Quindi, per farlo,

81
00:06:16,430 --> 00:06:22,480
introdurrò un'altra funzione nel file animation.ts dell'app.

82
00:06:22,480 --> 00:06:24,980
Quindi, entrando nel file animation.ts dell'app,

83
00:06:24,980 --> 00:06:33,210
esporterò un'altra funzione che chiamo come FlyInOut,

84
00:06:34,570 --> 00:06:39,325
vedrai perché uso questo nome qui.

85
00:06:39,325 --> 00:06:49,150
Quindi questo restituirebbe una funzione che è un trigger con il nome flyInOut.

86
00:06:49,820 --> 00:06:52,380
Quindi, all'interno era trigger,

87
00:06:52,380 --> 00:06:58,710
ho intenzione di definire il codice per ciò che questo trigger sta per fare.

88
00:06:59,620 --> 00:07:10,015
Quindi, qui, definirò uno stato qui con la stella del nome,

89
00:07:10,015 --> 00:07:12,445
quindi non importa quale stato sia,

90
00:07:12,445 --> 00:07:16,820
questo è applicabile a qualsiasi stato e poi definirò

91
00:07:16,820 --> 00:07:22,610
alcuni stili qui e i due stili che

92
00:07:22,610 --> 00:07:26,600
definirò è l'opacità è uno

93
00:07:26,600 --> 00:07:36,915
e la trasformazione è TransLatex (0),

94
00:07:36,915 --> 00:07:41,355
quindi il che significa che è nella sua posizione normale in questo caso.

95
00:07:41,355 --> 00:07:45,270
Ora, quando definisco le transizioni,

96
00:07:45,270 --> 00:07:50,880
posso anche definire le transizioni in questo modo.

97
00:07:50,990 --> 00:07:55,090
Quindi, se dico enter transition,

98
00:07:55,090 --> 00:07:59,240
la transizione enter è una scorciatoia per dire che va dallo

99
00:07:59,240 --> 00:08:03,190
stato vuoto a uno dello stato esistente.

100
00:08:03,190 --> 00:08:06,890
Quindi, il che significa che la vista sta entrando nella mia applicazione.

101
00:08:06,890 --> 00:08:10,655
Quindi inserisci, il che significa che ora quando instraderò in

102
00:08:10,655 --> 00:08:15,450
una vista particolare nella mia applicazione a pagina singola,

103
00:08:15,450 --> 00:08:18,500
quella vista entrerà nella vista.

104
00:08:18,500 --> 00:08:24,325
Quindi, è per questo che posso applicare la transizione tra i due punti in quel caso.

105
00:08:24,325 --> 00:08:27,725
Ora allo stesso modo, c'è un'altra transizione chiamata

106
00:08:27,725 --> 00:08:31,790
congedo dei due punti che posso applicare quando si passa da

107
00:08:31,790 --> 00:08:40,580
questa vista e quindi si sta prendendo la vista dalla presa del router della propria applicazione.

108
00:08:40,580 --> 00:08:46,950
Quindi, faremo entrambi entrare e l'altro che è lasciare.

109
00:08:52,760 --> 00:08:56,555
Quindi, due funzioni che ho intenzione di definire qui,

110
00:08:56,555 --> 00:09:00,155
transizione entrare e transizione lasciare qui.

111
00:09:00,155 --> 00:09:01,730
Quindi, per l'invio,

112
00:09:01,730 --> 00:09:04,150
cosa voglio definire?

113
00:09:04,150 --> 00:09:09,330
Per entrare, lasciami definire la funzione qui,

114
00:09:09,330 --> 00:09:11,800
e allo stesso modo, anche per lasciare,

115
00:09:11,800 --> 00:09:15,815
ho intenzione di definire le funzioni qui.

116
00:09:15,815 --> 00:09:18,955
Quindi, creando questa impalcatura qui.

117
00:09:18,955 --> 00:09:25,810
Ora, posso inserire le informazioni che voglio all'interno di queste transizioni.

118
00:09:25,810 --> 00:09:28,025
Quindi, quando si verifica questa transizione,

119
00:09:28,025 --> 00:09:35,590
inizierò con uno stile di trasformazione,

120
00:09:36,920 --> 00:09:42,495
TransLatex meno 100 percento,

121
00:09:42,495 --> 00:09:47,680
il che significa che la vista è completamente fuori dalla vista qui.

122
00:09:47,680 --> 00:09:52,205
Quindi, si parte da meno 100 per cento in questo momento.

123
00:09:52,205 --> 00:09:53,930
Quindi, quando stai entrando,

124
00:09:53,930 --> 00:09:55,590
inizierai con quello,

125
00:09:55,590 --> 00:09:58,710
e poi anche a questo punto

126
00:09:58,710 --> 00:10:03,530
, animerò e animerò in 500.

127
00:10:03,530 --> 00:10:05,710
Quindi, quando specifico 500 in questo modo,

128
00:10:05,710 --> 00:10:07,960
puoi anche farlo in questo modo.

129
00:10:07,960 --> 00:10:10,995
In alternativa, puoi dire, tra virgolette,

130
00:10:10,995 --> 00:10:16,900
«500ms», e quindi puoi persino usare ease-in o ease-out.

131
00:10:16,900 --> 00:10:19,400
Quindi, lasciami modificare questo in

132
00:10:19,400 --> 00:10:28,980
500ms ease-in perché questa vista sta arrivando.

133
00:10:28,980 --> 00:10:30,790
Quindi, ci faciliteremo la vista.

134
00:10:30,790 --> 00:10:37,610
Quindi, per congedo, applicherò la transizione come animata,

135
00:10:37,610 --> 00:10:45,640
e poi direi 500 millisecondi, ancora una volta, ease-out.

136
00:10:45,640 --> 00:10:47,740
Quindi, questo punto di vista se ne va.

137
00:10:47,740 --> 00:10:50,350
Quindi, vogliamo facilitare questa vista.

138
00:10:50,350 --> 00:10:52,365
Quindi, in questo caso,

139
00:10:52,365 --> 00:10:55,115
lo stile che applico

140
00:10:55,115 --> 00:11:03,880
è la trasformazione,

141
00:11:04,670 --> 00:11:09,590
TransLatex al 100%.

142
00:11:09,590 --> 00:11:15,370
Quindi, questa vista scomparirà completamente dallo schermo lì.

143
00:11:15,370 --> 00:11:18,055
TransLatex al 100%.

144
00:11:18,055 --> 00:11:23,000
Inoltre, imposterò l'opacità su zero.

145
00:11:23,000 --> 00:11:25,615
Quindi, scompare completamente dallo schermo.

146
00:11:25,615 --> 00:11:31,140
Quindi, questa animazione aggiungerà una buona nuova funzionalità qui.

147
00:11:31,140 --> 00:11:33,570
Ora, anche per questo,

148
00:11:33,570 --> 00:11:40,825
posso aggiungere, iniziando con un'opacità di zero, se preferisci.

149
00:11:40,825 --> 00:11:43,730
Aggiungiamolo e vediamo come appare.

150
00:11:43,730 --> 00:11:48,895
Quindi, questo è il trigger FlyInOut che ho definito qui.

151
00:11:48,895 --> 00:11:50,910
Ora, ti stai ovviamente chiedendo,

152
00:11:50,910 --> 00:11:53,690
come faccio a utilizzare questo FlyInOut e quindi applicarlo per

153
00:11:53,690 --> 00:11:56,650
instradare le transizioni nella mia applicazione?

154
00:11:56,650 --> 00:11:59,815
Quindi, per farlo, andremo a, in primo luogo,

155
00:11:59,815 --> 00:12:03,055
iniziando con il file component.ts del menu.

156
00:12:03,055 --> 00:12:04,810
Ho intenzione di importare

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

158
00:12:14,730 --> 00:12:25,820
dall'animazione dell'app.

159
00:12:27,090 --> 00:12:31,230
Quindi, andando al componente,

160
00:12:31,230 --> 00:12:35,425
ho intenzione di introdurre una nuova proprietà chiamata come host.

161
00:12:35,425 --> 00:12:39,445
Ti dirò cosa andra' in ospite tra poco.

162
00:12:39,445 --> 00:12:42,939
Quindi, includeremo anche la proprietà animazioni,

163
00:12:42,939 --> 00:12:45,470
che è una matrice qui.

164
00:12:45,470 --> 00:12:50,980
Poi, qui dentro, userò il FlyInOut che abbiamo appena importato.

165
00:12:50,980 --> 00:12:59,325
Quindi, questo trigger di animazione verrà applicato per questo componente multimediale.

166
00:12:59,325 --> 00:13:00,660
Ora, all'interno dell'host,

167
00:13:00,660 --> 00:13:07,975
quindi questo è il modo in cui garantisco che questa particolare animazione avvenga quando si verificano cambiamenti di percorso.

168
00:13:07,975 --> 00:13:11,215
Quindi, all'interno di questo host qui,

169
00:13:11,215 --> 00:13:15,560
fornisco questo come dicendo,

170
00:13:17,070 --> 00:13:22,705
@flyInOut e dico vero,

171
00:13:22,705 --> 00:13:28,730
e questo dovrebbe essere racchiuso tra virgolette anche,

172
00:13:29,370 --> 00:13:41,660
@flyInOut, true, e quindi stile,

173
00:13:42,000 --> 00:13:45,595
blocco di visualizzazione.

174
00:13:45,595 --> 00:13:52,330
Quindi, questi due dovrebbero essere applicati all'interno della proprietà host qui.

175
00:13:52,330 --> 00:13:56,410
Ora, quando lo facciamo, il mio componente menu inizierà ad animarsi

176
00:13:56,410 --> 00:14:00,440
quando instraderò nel componente menu,

177
00:14:00,440 --> 00:14:02,965
e poi anche quando lascio il componente menu.

178
00:14:02,965 --> 00:14:10,705
Ora, applicherò la stessa cosa ai restanti componenti della mia applicazione Angular.

179
00:14:10,705 --> 00:14:12,720
Quindi, quello che farò è,

180
00:14:12,720 --> 00:14:15,260
mi limiterò a copiare questo,

181
00:14:15,850 --> 00:14:20,910
e poi lo applicheremo al componente about.

182
00:14:20,910 --> 00:14:23,545
Quindi, andrò al componente about.

183
00:14:23,545 --> 00:14:25,555
All' interno del decoratore dei componenti,

184
00:14:25,555 --> 00:14:28,650
ho incluso le informazioni qui

185
00:14:28,650 --> 00:14:34,070
e vedi la linea rossa ondulata che mi ricorda che ho bisogno di importare

186
00:14:34,080 --> 00:14:42,255
FlyInOut da animazioni, animazioni dell'app.

187
00:14:42,255 --> 00:14:46,410
Quindi, lo stesso approccio, sul componente,

188
00:14:46,410 --> 00:14:52,080
quindi all'interno del componente di contatto anche, la stessa cosa,

189
00:15:08,840 --> 00:15:17,980
e quindi applicare le proprietà host e animazione al decoratore del componente,

190
00:15:17,980 --> 00:15:21,660
e poi cos'altro abbiamo?

191
00:15:21,660 --> 00:15:28,040
Il componente di casa. Andiamo al componente di casa e ripetiamo la stessa cosa qui.

192
00:15:28,040 --> 00:15:33,385
Aggiungerò l'host e la proprietà delle animazioni,

193
00:15:33,385 --> 00:15:36,210
quindi andrò avanti e importerò

194
00:15:36,210 --> 00:15:50,210
FlyInOut, dall'animazione dell'app.

195
00:15:50,350 --> 00:15:56,235
Ne abbiamo persi qualcuna? Oh, dobbiamo anche aggiornare il componente del dettaglio del piatto.

196
00:15:56,235 --> 00:15:58,360
Quindi, lasciami andare al componente dettaglio piatto.

197
00:15:58,360 --> 00:16:00,840
Dal momento che abbiamo già la visibilità lì,

198
00:16:00,840 --> 00:16:04,435
ho intenzione di importare il FlyInOut.

199
00:16:04,435 --> 00:16:08,920
Quindi, dal momento che abbiamo già impostato le parti rimanenti qui,

200
00:16:08,920 --> 00:16:12,665
ho intenzione di entrare e incollare quel codice,

201
00:16:12,665 --> 00:16:17,125
e ovviamente, ho due animazioni qui.

202
00:16:17,125 --> 00:16:20,860
Lasciami tagliare la visibilità da qui e poi

203
00:16:20,860 --> 00:16:29,420
aggiungerla nell'altra animazione,

204
00:16:29,420 --> 00:16:35,040
quindi tagliarla in modo da avere una singola proprietà di animazione con

205
00:16:35,040 --> 00:16:40,780
entrambe le funzioni flyInOut e visibilità sia incluse che chiamate lì,

206
00:16:40,780 --> 00:16:42,630
e quindi la proprietà host.

207
00:16:42,630 --> 00:16:45,625
Ora, salviamo le modifiche e diamo un'occhiata

208
00:16:45,625 --> 00:16:51,370
alla nuova animazione che abbiamo appena applicato ai nostri componenti.

209
00:16:51,370 --> 00:16:56,475
A partire dalla vista iniziale.

210
00:16:56,475 --> 00:16:59,000
Quindi, abbiamo la vista home che viene renderizzata qui.

211
00:16:59,000 --> 00:17:02,500
Permettetemi ora di passare rapidamente alla visualizzazione Informazioni

212
00:17:02,500 --> 00:17:05,800
e quindi si vede che la visualizzazione Info scorre solo in mentre

213
00:17:05,800 --> 00:17:09,780
la visualizzazione Home scorre fuori nello schermo qui.

214
00:17:09,780 --> 00:17:11,810
Allo stesso modo, quando si accede al menu,

215
00:17:11,810 --> 00:17:16,190
si vedrà che la visualizzazione Menu scorre mentre la vista Info scorre fuori.

216
00:17:16,190 --> 00:17:20,240
E' cosi' veloce che non te ne accorgi come tale.

217
00:17:20,240 --> 00:17:22,740
Analogamente, per la vista Contatto,

218
00:17:22,740 --> 00:17:24,710
viene visualizzata la vista contatto scorrevole.

219
00:17:24,710 --> 00:17:28,940
Quindi, questo tipo di animazione può essere aggiunto utilizzando

220
00:17:28,940 --> 00:17:34,170
questo approccio che abbiamo appena illustrato per la vostra applicazione Angular.

221
00:17:34,170 --> 00:17:40,375
Non abbiamo ancora finito. Faremo un'altra animazione all'interno della nostra applicazione.

222
00:17:40,375 --> 00:17:44,955
Per illustrare cosa mi piacerebbe fare nella prossima animazione,

223
00:17:44,955 --> 00:17:48,495
diamo un rapido orologio sul componente menu.

224
00:17:48,495 --> 00:17:50,780
Quindi, si vede che quando il componente

225
00:17:50,780 --> 00:17:54,830
del menu, quando lo spinner gira e poi viene sostituito dalla vista,

226
00:17:54,830 --> 00:17:57,180
la vista appare improvvisamente sullo schermo,

227
00:17:57,180 --> 00:17:59,740
ed è un po 'strillante per l'occhio.

228
00:17:59,740 --> 00:18:01,230
Potresti non accorgertene.

229
00:18:01,230 --> 00:18:03,725
Potresti esserne abbastanza felice.

230
00:18:03,725 --> 00:18:07,340
Ma possiamo aggiungere in un modo di allentamento in

231
00:18:07,340 --> 00:18:12,235
quella vista quando i dati vengono recuperati dal server e la vista viene renderizzata.

232
00:18:12,235 --> 00:18:20,625
Quindi, quando la variabile del piatto nel mio file component.ts del menu non viene annullata,

233
00:18:20,625 --> 00:18:27,290
allora lo spinner sarà nascosto e quindi la vista del piatto,

234
00:18:27,290 --> 00:18:30,320
il menu viene costruito e quindi disposto.

235
00:18:30,320 --> 00:18:33,060
Quindi, vogliamo che entri nello schermo.

236
00:18:33,060 --> 00:18:38,820
Quindi, aggiungiamo un'altra animazione per effetto che sia nel componente menu.

237
00:18:38,820 --> 00:18:42,055
Applicheremo anche la stessa cosa nel componente dettaglio piatto.

238
00:18:42,055 --> 00:18:46,540
Useremo anche lo stesso nel componente Home anche e il componente About,

239
00:18:46,540 --> 00:18:51,550
dove stiamo recuperando i dati per mostrare l'elenco dei leader.

240
00:18:51,550 --> 00:18:56,145
Quindi, ovunque tu stia recuperando i dati dal server e quindi disponendo

241
00:18:56,145 --> 00:18:57,740
la vista, quando appare

242
00:18:57,740 --> 00:19:03,275
la vista, vogliamo facilitare la vista usando questa nuova animazione che creerò successivamente.

243
00:19:03,275 --> 00:19:06,230
Andando al file animation.ts dell'app,

244
00:19:06,230 --> 00:19:08,615
aggiungerò un'altra funzione qui

245
00:19:08,615 --> 00:19:14,750
e lasciatemi chiamare expand.

246
00:19:14,750 --> 00:19:18,200
Questa funzione espanderà la vista che viene

247
00:19:18,200 --> 00:19:22,370
disposta dopo che i dati sono stati recuperati dal lato server.

248
00:19:22,370 --> 00:19:24,885
Quindi, questa vista, ancora una volta,

249
00:19:24,885 --> 00:19:28,370
restituirò un trigger qui.

250
00:19:28,370 --> 00:19:32,280
Nominerò il trigger come espandi

251
00:19:32,280 --> 00:19:37,690
e questo trigger creerà.

252
00:19:37,890 --> 00:19:40,590
Come definiamo questo trigger.

253
00:19:40,590 --> 00:19:49,870
Quindi, all'interno di questo grilletto includeremo uno stato con una stella.

254
00:19:49,870 --> 00:19:51,920
Quindi, non importa quale stato sia.

255
00:19:51,920 --> 00:20:00,580
Tutti gli stati saranno renderizzati con lo stile come

256
00:20:00,580 --> 00:20:10,420
opacità una trasformazione traduci x 0.

257
00:20:10,420 --> 00:20:16,430
Quindi, viene visualizzato a destra e al centro nella mia applicazione.

258
00:20:17,520 --> 00:20:20,990
Quello dovrebbe essere un tutore.

259
00:20:20,990 --> 00:20:23,250
Lo guardavo e gli dissi: «

260
00:20:23,250 --> 00:20:25,735
Perché mostra una linea rossa strisciante.

261
00:20:25,735 --> 00:20:29,560
Quindi, quando si digita molto velocemente, spesso si commettono errori lì.

262
00:20:29,560 --> 00:20:31,070
Quindi, invece di una parentesi quadra,

263
00:20:31,070 --> 00:20:34,205
quella dovrebbe essere una parentesi graffa lì.

264
00:20:34,205 --> 00:20:35,915
Quindi, questo è lo stato.

265
00:20:35,915 --> 00:20:44,925
Quindi, qualsiasi stato che sarà completamente visibile e centrato dove dovrebbe essere centrato.

266
00:20:44,925 --> 00:20:49,180
Ora, lasciatemi innescare una transizione.

267
00:20:49,180 --> 00:20:51,730
Ora, questa transizione verrà attivata solo

268
00:20:51,730 --> 00:20:55,465
all'invio quando la vista è disposta sullo schermo.

269
00:20:55,465 --> 00:21:00,740
La parte di uscita che stiamo già facendo nell'animazione del percorso, quindi non ne abbiamo bisogno.

270
00:21:00,740 --> 00:21:03,060
Abbiamo solo bisogno dell'inter part per questa vista perché

271
00:21:03,060 --> 00:21:06,575
la vista è renderizzata su questo schermo lì.

272
00:21:06,575 --> 00:21:08,435
Quindi, nell'invio,

273
00:21:08,435 --> 00:21:14,625
definirò la transizione in modo appropriato.

274
00:21:14,625 --> 00:21:18,860
Quindi, nella transizione cosa voglio fare?

275
00:21:18,860 --> 00:21:27,260
Voglio applicare lo stesso approccio che ho usato con la transizione enter qui.

276
00:21:27,260 --> 00:21:32,600
Quindi, ho intenzione di copiare questo e poi apportare alcune piccole modifiche al codice lì.

277
00:21:32,600 --> 00:21:36,335
Quindi, anche per la transizione enter qui,

278
00:21:36,335 --> 00:21:38,490
voglio applicare la stessa cosa.

279
00:21:38,490 --> 00:21:42,040
Dirò tradurre Insta dal 100 per cento.

280
00:21:42,040 --> 00:21:46,630
Ho intenzione di usare solo il 50 percento e poi farò la traduzione Y.

281
00:21:46,630 --> 00:21:52,460
Quindi, il che significa che questa vista scenderà dal primo 50 precent a partire da

282
00:21:52,460 --> 00:21:58,655
opacità zero e poi lo faciliterò in un tempo un po 'più veloce,

283
00:21:58,655 --> 00:22:04,200
200 millisecondi e lo faciliterà nella nostra applicazione.

284
00:22:04,200 --> 00:22:09,640
Ora, quindi, vedi il piccolo aggiustamento al codice qui.

285
00:22:09,640 --> 00:22:14,845
Quindi, traduci meno 50 percento e opacità zero ed

286
00:22:14,845 --> 00:22:21,025
è facilitato in 200 millisecondi e poi a quel punto,

287
00:22:21,025 --> 00:22:27,105
posso applicare questo stile come lo stesso stile.

288
00:22:27,105 --> 00:22:32,240
Mi candidero' li'. Quindi, copierò quello stile e poi applicherò quello stile lì.

289
00:22:32,240 --> 00:22:34,440
Quindi, quando è facilitato,

290
00:22:34,440 --> 00:22:40,115
entrerà e sarà completamente visibile dove dovrebbe essere.

291
00:22:40,115 --> 00:22:43,735
Quindi, questa è la funzione di espansione che ho definito qui.

292
00:22:43,735 --> 00:22:45,950
Quindi, dove voglio utilizzare questa funzione?

293
00:22:45,950 --> 00:22:52,060
Andremo prima al componente del menu e all'interno del componente del menu,

294
00:22:52,060 --> 00:22:55,530
ora anche importarlo,

295
00:22:55,530 --> 00:23:04,595
espandere e poi aggiungerlo nelle mie animazioni e poi come faccio ad applicare questa espansione?

296
00:23:04,595 --> 00:23:08,160
Quindi, andando a quel file di modello dei componenti del menu.

297
00:23:08,160 --> 00:23:09,925
Nel file modello,

298
00:23:09,925 --> 00:23:12,840
applicherò l'espansione all'

299
00:23:12,840 --> 00:23:20,435
elenco della griglia in cui sto applicando questo.

300
00:23:20,435 --> 00:23:24,960
Quindi, lasciami copiare e poi anche andremo

301
00:23:24,960 --> 00:23:32,230
al componente di casa e all'interno del componente di casa anche,

302
00:23:32,230 --> 00:23:42,590
Ho intenzione di includere l'espansione e quindi aggiungere l'espansione per l'animazione,

303
00:23:43,430 --> 00:23:49,475
e poi andare al file di modello componenti di casa e poi applicherò

304
00:23:49,475 --> 00:23:57,060
che espandere i componenti del piatto MD scheda,

305
00:23:57,060 --> 00:24:02,695
ai componenti di promozione scheda MD e anche ai

306
00:24:02,695 --> 00:24:05,580
componenti leader scheda MD qui perché tutti questi

307
00:24:05,580 --> 00:24:09,880
tre saranno recuperati in futuro dal server e quindi renderizzati.

308
00:24:09,880 --> 00:24:15,075
Quindi, i dati dei componenti del piatto sono già stati recuperati dal server.

309
00:24:15,075 --> 00:24:20,080
Ora, la stessa cosa va al componente DishDetail.

310
00:24:20,080 --> 00:24:27,000
Ho intenzione di aggiungere l'espansione alle importazioni e quindi aggiungere

311
00:24:27,000 --> 00:24:35,530
un'espansione nell'animazione andando alla vista del componente DishDetail.

312
00:24:35,530 --> 00:24:37,415
Insieme a una visibilità,

313
00:24:37,415 --> 00:24:40,095
applicherò anche l'espansione

314
00:24:40,095 --> 00:24:47,705
alla scheda div lì e poi ai commenti div anche qui.

315
00:24:47,705 --> 00:24:50,720
Questo è nel componente DishDetail.

316
00:24:50,720 --> 00:24:54,530
Il componente di contatto non ha nulla che viene recuperato dal server.

317
00:24:54,530 --> 00:25:00,265
Quindi, andrò semplicemente al componente about e nel componente about anche,

318
00:25:00,265 --> 00:25:08,680
includerò l'espansione e anche nelle animazioni.

319
00:25:08,680 --> 00:25:12,870
Andando al file del modello sui componenti qui questo test

320
00:25:12,870 --> 00:25:17,190
qui che mostra i leader vengono recuperati dal lato server.

321
00:25:17,190 --> 00:25:20,310
Quindi, ho intenzione di applicare l'espansione su questo.

322
00:25:20,310 --> 00:25:23,250
Salviamo le modifiche e poi andiamo a

323
00:25:23,250 --> 00:25:26,960
dare un'occhiata alla nostra applicazione angolare nel browser.

324
00:25:26,960 --> 00:25:29,235
Andando alla nostra applicazione angolare.

325
00:25:29,235 --> 00:25:31,665
Ora, quando si entra nel modello di casa,

326
00:25:31,665 --> 00:25:34,700
si può vedere che le carte quando sono stati recuperati,

327
00:25:34,700 --> 00:25:38,070
sono scivolati nella mia vista lì.

328
00:25:38,070 --> 00:25:40,970
Ora, allo stesso modo quando si va al componente about,

329
00:25:40,970 --> 00:25:45,050
si vede che una volta che i dati vengono recuperati dal server,

330
00:25:45,050 --> 00:25:50,470
allora il rendering dei vari leader viene fatto

331
00:25:50,470 --> 00:25:56,590
scorrere sempre così lentamente in posizione in questa vista qui.

332
00:25:56,590 --> 00:25:58,905
Allo stesso modo, andando al componente menu,

333
00:25:58,905 --> 00:26:01,270
vedremo uno stesso comportamento qui.

334
00:26:01,270 --> 00:26:03,595
Quindi, una volta che i dati del menu sono pronti,

335
00:26:03,595 --> 00:26:07,065
il componente del menu scorre in posizione proprio lì.

336
00:26:07,065 --> 00:26:09,980
Stessa cosa con i componenti del piatto.

337
00:26:09,980 --> 00:26:12,490
Quindi, lasciami andare al componente DishDetail e vedrai che

338
00:26:12,490 --> 00:26:15,250
la vista scorre in posizione lì, ma l'

339
00:26:15,250 --> 00:26:18,495
altra animazione che stava

340
00:26:18,495 --> 00:26:22,625
scomparendo e riapparendo quella parte funziona ancora come prima.

341
00:26:22,625 --> 00:26:32,755
Quindi, vedete che abbiamo introdotto un'altra animazione nella nostra applicazione angolare.

342
00:26:32,755 --> 00:26:38,555
Ora, che ti piaccia o vuoi fare un modo più elaborato di fare animazioni,

343
00:26:38,555 --> 00:26:41,605
certamente, puoi impazzire

344
00:26:41,605 --> 00:26:45,395
facendo molti tipi diversi di cose con la tua animazione.

345
00:26:45,395 --> 00:26:52,395
Modifica di molte proprietà diverse all'interno degli stili come in che modo ti piace e così via.

346
00:26:52,395 --> 00:26:57,060
Ma ho sentito che alcune sottili animazioni qua e là

347
00:26:57,060 --> 00:27:02,390
contribuiranno a migliorare l'interfaccia utente per la mia applicazione angolare.

348
00:27:02,390 --> 00:27:08,195
Quindi, ho aggiunto altre due nuove animazioni alla mia applicazione Angular.

349
00:27:08,195 --> 00:27:14,535
Con questo, completiamo la seconda parte del nostro esercizio di animazioni.

350
00:27:14,535 --> 00:27:18,240
Spero che con queste due parti di esercizio,

351
00:27:18,240 --> 00:27:21,280
tu abbia capito meglio su come utilizzare le

352
00:27:21,280 --> 00:27:24,555
animazioni all'interno della tua applicazione Angular.

353
00:27:24,555 --> 00:27:32,040
Questo è un buon momento per fare un commit git con il messaggio, animazioni parte due.