1
00:00:03,680 --> 00:00:09,920
Continuando com o nosso exercício de animação da primeira parte anterior.

2
00:00:09,920 --> 00:00:15,470
Adicionaremos mais algumas animações à nossa aplicação angular.

3
00:00:15,470 --> 00:00:19,515
Em particular, adicionaremos uma animação que será acionada

4
00:00:19,515 --> 00:00:24,440
quando as mudanças de rota ocorrerem em nosso aplicativo de página única.

5
00:00:24,440 --> 00:00:28,125
Nós também vamos adicionar em uma animação que permite

6
00:00:28,125 --> 00:00:32,595
uma exibição para ser exibido quando os dados são obtidos do lado do servidor,

7
00:00:32,595 --> 00:00:39,535
então quando você está descartando o girador em sua vista e, em seguida, renderizando a vista,

8
00:00:39,535 --> 00:00:42,395
nós queremos que a vista seja projetada na tela

9
00:00:42,395 --> 00:00:45,710
em vez de simplesmente aparecer todos de repente.

10
00:00:45,710 --> 00:00:49,774
Então, algumas novas animações que vamos adicionar neste exercício.

11
00:00:49,774 --> 00:00:54,440
Ao longo do caminho quando você tem várias animações em seu aplicativo,

12
00:00:54,440 --> 00:00:57,800
pode ser melhor refatorar o código de uma forma que seja mais

13
00:00:57,800 --> 00:01:01,190
gerenciável em vez de incluir a

14
00:01:01,190 --> 00:01:05,210
fragmentada cada pouco de um gatilho em cada um dos arquivos

15
00:01:05,210 --> 00:01:09,460
dentro de nossos componentes de nossa aplicação angular.

16
00:01:09,460 --> 00:01:15,880
Então, vamos fazer todas essas etapas como parte dois do exercício de animação.

17
00:01:15,880 --> 00:01:20,750
A primeira coisa que vou fazer é que vamos refatorar

18
00:01:20,750 --> 00:01:26,705
o código que já fizemos como parte um deste exercício de animações.

19
00:01:26,705 --> 00:01:32,790
Esta abordagem que estou ilustrando para vocês aqui é apenas a minha abordagem sugerida.

20
00:01:32,790 --> 00:01:36,080
Você não precisa necessariamente seguir exatamente assim,

21
00:01:36,080 --> 00:01:40,460
mas eu sinto que isso ajuda a organizar o código muito melhor.

22
00:01:40,460 --> 00:01:45,050
Então, o que eu vou fazer é como se tivéssemos uma pasta separada para serviços,

23
00:01:45,050 --> 00:01:49,040
nós tínhamos uma pasta separada para os recursos compartilhados e assim por diante,

24
00:01:49,040 --> 00:01:51,975
Eu vou criar uma nova pasta chamada animações.

25
00:01:51,975 --> 00:01:57,200
Vamos armazenar todo o código relacionado à animação lá e, em seguida, fazer uso dele importando

26
00:01:57,200 --> 00:02:03,065
sempre que necessário dentro de nossos componentes em nossa aplicação angular.

27
00:02:03,065 --> 00:02:05,865
Então, indo para o nosso código,

28
00:02:05,865 --> 00:02:12,615
dentro da pasta do aplicativo eu vou criar uma nova pasta e nomeá-la Animações.

29
00:02:12,615 --> 00:02:15,115
Dentro desta pasta Animations,

30
00:02:15,115 --> 00:02:20,540
Eu vou criar um novo arquivo e por falta de uma palavra melhor eu

31
00:02:20,540 --> 00:02:26,940
vou chamá-lo arquivo app.animation.ts.

32
00:02:27,060 --> 00:02:31,915
Em seguida, dentro disso, eu vou importar

33
00:02:31,915 --> 00:02:38,865
as várias classes de animações angulares que eu fiz no componente DishDetail.

34
00:02:38,865 --> 00:02:41,135
Então, indo para o componente DishDetail,

35
00:02:41,135 --> 00:02:43,700
você vai lembrar que a primeira coisa que fiz

36
00:02:43,700 --> 00:02:46,640
foi eu adicionei esta linha ao componente DishDetail.

37
00:02:46,640 --> 00:02:49,685
Eu vou cortá-lo do componente DishDetail e

38
00:02:49,685 --> 00:02:53,035
em vez colá-lo nas animações do aplicativo,

39
00:02:53,035 --> 00:02:57,765
de modo que onde quer que este aplicativo animações é

40
00:02:57,765 --> 00:03:03,090
incluído importando-o para nossos outros componentes,

41
00:03:03,090 --> 00:03:05,640
isso virá automaticamente para o direito lá.

42
00:03:05,640 --> 00:03:07,750
Agora, dentro deste app animações,

43
00:03:07,750 --> 00:03:12,000
Eu vou criar algumas funções de fábrica que exportarão os vários gatilhos.

44
00:03:12,000 --> 00:03:14,495
A primeira função de fábrica que criarei

45
00:03:14,495 --> 00:03:22,660
esta função de exportação e chamarei de visibilidade.

46
00:03:23,000 --> 00:03:27,290
Esta função de visibilidade retornará o código

47
00:03:27,290 --> 00:03:32,070
correspondente ao gatilho que fizemos no componente DishDetail.

48
00:03:32,070 --> 00:03:34,455
Então, voltando para o componente DishDetail,

49
00:03:34,455 --> 00:03:44,520
Eu só vou cortar este código inteiro para o gatilho a partir daqui e, em seguida, voltar para

50
00:03:44,520 --> 00:03:48,800
app animation.ts arquivo e, em seguida, colá-lo em

51
00:03:48,800 --> 00:03:55,825
lugar bem ali na função aqui.

52
00:03:55,825 --> 00:04:02,530
Isso agora se torna uma função que está disponível para importação do meu componente DishDetail.

53
00:04:02,530 --> 00:04:06,840
Então, voltando ao componente DishDetail.

54
00:04:06,840 --> 00:04:12,640
Agora, no lugar onde eu importei o gatilho e outras classes,

55
00:04:12,640 --> 00:04:19,030
Eu vou agora importar a visibilidade

56
00:04:19,030 --> 00:04:30,475
do aplicativo da animação, animação,

57
00:04:30,475 --> 00:04:35,300
e então essa função agora ficará disponível para mim dentro do meu código aqui.

58
00:04:35,300 --> 00:04:38,164
Assim, uma vez que eu faço isso dentro de minhas animações,

59
00:04:38,164 --> 00:04:42,560
eu posso simplesmente chamar essa função para que eu possa dizer

60
00:04:42,560 --> 00:04:49,515
visibilidade e, em seguida, o código de gatilho agora se torna parte do meu componente aqui.

61
00:04:49,515 --> 00:04:55,360
Agora, isso eu acho é uma maneira melhor de organizar o código para minhas animações.

62
00:04:55,360 --> 00:04:59,400
Agora, se eu precisar usar o mesmo gatilho em outro componente,

63
00:04:59,400 --> 00:05:07,545
eu posso simplesmente seguir essa abordagem para incluir isso em meus outros componentes também.

64
00:05:07,545 --> 00:05:09,800
Vamos salvar as alterações e, em seguida, ir e dar

65
00:05:09,800 --> 00:05:13,020
uma rápida olhada em nosso aplicativo no navegador.

66
00:05:13,020 --> 00:05:18,460
Vá para o navegador, você vê que quando eu vou para o componente de disco,

67
00:05:18,460 --> 00:05:21,215
o componente de disco está ali e, em seguida,

68
00:05:21,215 --> 00:05:24,810
ele vai ter o mesmo comportamento de animação de antes.

69
00:05:24,810 --> 00:05:26,640
Então, refatorando o código,

70
00:05:26,640 --> 00:05:31,085
eu consegui organizar o código e

71
00:05:31,085 --> 00:05:36,385
ainda funciona exatamente da mesma forma que a parte um deste exercício.

72
00:05:36,385 --> 00:05:41,875
Se você tivesse apenas uma única animação usada em um único lugar,

73
00:05:41,875 --> 00:05:44,870
então a abordagem anterior funciona muito bem, mas se você tiver

74
00:05:44,870 --> 00:05:48,800
múltiplo e especialmente se você estiver reutilizando o código em muitos componentes,

75
00:05:48,800 --> 00:05:55,160
então essa abordagem refatorada é uma maneira muito melhor de implementar a solução.

76
00:05:55,160 --> 00:06:00,250
A próxima atualização que vou fazer é adicionar animações nas mudanças de rota.

77
00:06:00,250 --> 00:06:04,670
Então, quando eu vou de uma vista para outra vista, então, por exemplo,

78
00:06:04,670 --> 00:06:11,145
da casa para o sobre ou prestes a menu ou menu para entrar em contato ou vice-versa,

79
00:06:11,145 --> 00:06:15,350
então eu quero ser capaz de animar essas mudanças dentro do meu aplicativo.

80
00:06:15,350 --> 00:06:16,430
Então, para fazer isso,

81
00:06:16,430 --> 00:06:22,480
Vou introduzir mais uma função no arquivo animation.ts app.

82
00:06:22,480 --> 00:06:24,980
Então, indo para o arquivo animation.ts app,

83
00:06:24,980 --> 00:06:33,210
Eu vou exportar outra função que eu chamo como FlyInOut,

84
00:06:34,570 --> 00:06:39,325
você vai ver por que eu uso este nome aqui.

85
00:06:39,325 --> 00:06:49,150
Então isso retornaria uma função que é um gatilho com o nome FlyInOut.

86
00:06:49,820 --> 00:06:52,380
Então, dentro estava gatilho,

87
00:06:52,380 --> 00:06:58,710
Eu vou definir o código para o que este gatilho vai fazer.

88
00:06:59,620 --> 00:07:10,015
Então, aqui, eu vou definir um estado aqui com o nome estrela,

89
00:07:10,015 --> 00:07:12,445
então não importa o estado que é,

90
00:07:12,445 --> 00:07:16,820
isso é aplicável a qualquer estado e então eu vou definir

91
00:07:16,820 --> 00:07:22,610
alguns estilos aqui e os dois estilos que eu

92
00:07:22,610 --> 00:07:26,600
vai definir é opacidade é uma

93
00:07:26,600 --> 00:07:36,915
e transformar é TranslaTeX (0),

94
00:07:36,915 --> 00:07:41,355
de modo que significa que ele está em sua posição normal neste caso.

95
00:07:41,355 --> 00:07:45,270
Agora, quando eu definir transições,

96
00:07:45,270 --> 00:07:50,880
eu também posso definir transições dessa maneira.

97
00:07:50,990 --> 00:07:55,090
Então, se eu disser entrar transição,

98
00:07:55,090 --> 00:07:59,240
a transição enter é uma abreviação para dizer indo de

99
00:07:59,240 --> 00:08:03,190
estado vazio para um do estado existente.

100
00:08:03,190 --> 00:08:06,890
Então, o que significa que a exibição está entrando em meu aplicativo.

101
00:08:06,890 --> 00:08:10,655
Então digite, o que significa que agora quando eu rotear para

102
00:08:10,655 --> 00:08:15,450
uma determinada exibição em meu aplicativo de página única,

103
00:08:15,450 --> 00:08:18,500
essa exibição estará entrando na exibição.

104
00:08:18,500 --> 00:08:24,325
Então, é por isso que eu posso aplicar a transição entre dois pontos nesse caso.

105
00:08:24,325 --> 00:08:27,725
Agora, da mesma forma, há outra transição chamada dois-pontos

106
00:08:27,725 --> 00:08:31,790
deixar que eu posso aplicar quando você faz a transição para fora do

107
00:08:31,790 --> 00:08:40,580
esta vista e, em seguida, você está tirando a visão da saída do roteador do seu aplicativo.

108
00:08:40,580 --> 00:08:46,950
Então, vamos fazer tanto entrar e o outro que é sair.

109
00:08:52,760 --> 00:08:56,555
Então, duas funções que eu vou definir aqui,

110
00:08:56,555 --> 00:09:00,155
transição entrar e transição sair aqui.

111
00:09:00,155 --> 00:09:01,730
Então, para o enter,

112
00:09:01,730 --> 00:09:04,150
o que eu quero definir?

113
00:09:04,150 --> 00:09:09,330
Para entrar, deixe-me definir a função aqui,

114
00:09:09,330 --> 00:09:11,800
e da mesma forma, para deixar também,

115
00:09:11,800 --> 00:09:15,815
Eu vou definir as funções aqui.

116
00:09:15,815 --> 00:09:18,955
Então, criando este andaime aqui.

117
00:09:18,955 --> 00:09:25,810
Agora, posso inserir as informações que quero dentro dessas transições.

118
00:09:25,810 --> 00:09:28,025
Então, quando esta transição ocorre,

119
00:09:28,025 --> 00:09:35,590
Vou começar com um estilo de transformação,

120
00:09:36,920 --> 00:09:42,495
TranslaTeX menos 100 por cento,

121
00:09:42,495 --> 00:09:47,680
o que significa que a vista está completamente fora da vista aqui.

122
00:09:47,680 --> 00:09:52,205
Então, você começa lá a partir de menos 100 por cento neste momento.

123
00:09:52,205 --> 00:09:53,930
Então, quando você está entrando,

124
00:09:53,930 --> 00:09:55,590
você vai começar com isso,

125
00:09:55,590 --> 00:09:58,710
e então também neste ponto,

126
00:09:58,710 --> 00:10:03,530
eu vou animar, e animar em 500.

127
00:10:03,530 --> 00:10:05,710
Então, quando eu especificar 500 como este,

128
00:10:05,710 --> 00:10:07,960
você pode até fazê-lo desta maneira.

129
00:10:07,960 --> 00:10:10,995
Alternativamente, você pode dizer, entre aspas,

130
00:10:10,995 --> 00:10:16,900
“500ms” e, em seguida, você pode até usar facilidade de acesso ou facilidade de saída.

131
00:10:16,900 --> 00:10:19,400
Então, deixe-me modificar isso em

132
00:10:19,400 --> 00:10:28,980
500ms ease-in porque esta vista está chegando.

133
00:10:28,980 --> 00:10:30,790
Então, vamos facilitar a exibição.

134
00:10:30,790 --> 00:10:37,610
Então, para sair, vou aplicar a transição como animate,

135
00:10:37,610 --> 00:10:45,640
e então eu diria 500 milissegundos, novamente, ease-out.

136
00:10:45,640 --> 00:10:47,740
Então, esta vista está saindo.

137
00:10:47,740 --> 00:10:50,350
Então, queremos facilitar essa visão.

138
00:10:50,350 --> 00:10:52,365
Então, neste caso,

139
00:10:52,365 --> 00:10:55,115
o estilo que eu aplico

140
00:10:55,115 --> 00:11:03,880
é transformar,

141
00:11:04,670 --> 00:11:09,590
TranslaTeX 100 por cento.

142
00:11:09,590 --> 00:11:15,370
Então, essa visão desaparecerá completamente da tela lá.

143
00:11:15,370 --> 00:11:18,055
TranslaTeX 100 por cento.

144
00:11:18,055 --> 00:11:23,000
Além disso, vou definir a opacidade como zero.

145
00:11:23,000 --> 00:11:25,615
Então, desaparece completamente da tela.

146
00:11:25,615 --> 00:11:31,140
Então, esta animação irá adicionar um bom novo recurso aqui.

147
00:11:31,140 --> 00:11:33,570
Agora, para este também,

148
00:11:33,570 --> 00:11:40,825
Eu posso adicionar, começando com uma opacidade de zero, se você preferir.

149
00:11:40,825 --> 00:11:43,730
Vamos adicionar isso e ver como ele se parece.

150
00:11:43,730 --> 00:11:48,895
Então, este é o gatilho FlyInOut que eu defini aqui.

151
00:11:48,895 --> 00:11:50,910
Agora, você está obviamente se perguntando,

152
00:11:50,910 --> 00:11:53,690
como faço uso deste FlyInOut e, em seguida, aplicar

153
00:11:53,690 --> 00:11:56,650
isso para rotear transições em meu aplicativo?

154
00:11:56,650 --> 00:11:59,815
Então, para fazer isso, vamos para, primeiro,

155
00:11:59,815 --> 00:12:03,055
começando com o arquivo component.ts menu.

156
00:12:03,055 --> 00:12:04,810
Eu vou importar

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

158
00:12:14,730 --> 00:12:25,820
da animação do aplicativo.

159
00:12:27,090 --> 00:12:31,230
Então, indo para o componente,

160
00:12:31,230 --> 00:12:35,425
Agora vou introduzir uma nova propriedade chamada como host.

161
00:12:35,425 --> 00:12:39,445
Eu vou te dizer o que vai para o host em pouco tempo.

162
00:12:39,445 --> 00:12:42,939
Em seguida, vamos também incluir a propriedade animações,

163
00:12:42,939 --> 00:12:45,470
que é uma matriz aqui.

164
00:12:45,470 --> 00:12:50,980
Então, aqui dentro, vou usar o FlyInOut que acabamos de importar.

165
00:12:50,980 --> 00:12:59,325
Então, este gatilho de animação será aplicado para este componente de mídia.

166
00:12:59,325 --> 00:13:00,660
Agora, dentro do host,

167
00:13:00,660 --> 00:13:07,975
então é assim que eu assegurei que essa animação em particular aconteça quando ocorrerem alterações de rota.

168
00:13:07,975 --> 00:13:11,215
Então, dentro deste host aqui,

169
00:13:11,215 --> 00:13:15,560
Eu forneço isso como dizendo,

170
00:13:17,070 --> 00:13:22,705
@flyInOut e dizer verdadeiro,

171
00:13:22,705 --> 00:13:28,730
e isso deve ser incluído entre aspas também,

172
00:13:29,370 --> 00:13:41,660
@flyInOut, true e, em seguida, style,

173
00:13:42,000 --> 00:13:45,595
bloco de exibição.

174
00:13:45,595 --> 00:13:52,330
Então, esses dois devem ser aplicados dentro da propriedade host aqui.

175
00:13:52,330 --> 00:13:56,410
Agora, quando fizermos isso, meu componente de menu agora começará a animar

176
00:13:56,410 --> 00:14:00,440
quando eu encaminhar para o componente de menu,

177
00:14:00,440 --> 00:14:02,965
e depois também quando eu sair do componente de menu.

178
00:14:02,965 --> 00:14:10,705
Agora, vou aplicar a mesma coisa para os componentes restantes da minha aplicação Angular.

179
00:14:10,705 --> 00:14:12,720
Então, o que eu vou fazer é,

180
00:14:12,720 --> 00:14:15,260
Eu vou apenas copiar isso,

181
00:14:15,850 --> 00:14:20,910
e então vamos aplicar isso ao componente sobre.

182
00:14:20,910 --> 00:14:23,545
Então, eu vou para o componente sobre.

183
00:14:23,545 --> 00:14:25,555
Dentro do decorador componente,

184
00:14:25,555 --> 00:14:28,650
Eu incluí as informações aqui,

185
00:14:28,650 --> 00:14:34,070
e você vê a linha vermelha rabugenta que me lembra que eu preciso importar

186
00:14:34,080 --> 00:14:42,255
FlyInOut de animações, animação aplicativo.

187
00:14:42,255 --> 00:14:46,410
Então, a mesma abordagem, sobre componente,

188
00:14:46,410 --> 00:14:52,080
então dentro do componente de contato também, a mesma coisa,

189
00:15:08,840 --> 00:15:17,980
e, em seguida, aplicar o host e propriedades de animação para o decorador componente,

190
00:15:17,980 --> 00:15:21,660
e então o que mais temos?

191
00:15:21,660 --> 00:15:28,040
O componente inicial. Vamos para o componente doméstico e repetir a mesma coisa aqui.

192
00:15:28,040 --> 00:15:33,385
Vou adicionar no host e a propriedade de animações,

193
00:15:33,385 --> 00:15:36,210
e, em seguida, vá em frente e importe

194
00:15:36,210 --> 00:15:50,210
FlyInOut, da animação do aplicativo.

195
00:15:50,350 --> 00:15:56,235
Nós perdemos algum? Também precisamos atualizar o componente de detalhe do prato.

196
00:15:56,235 --> 00:15:58,360
Então, deixe-me ir para o componente detalhe prato.

197
00:15:58,360 --> 00:16:00,840
Como já temos a visibilidade lá,

198
00:16:00,840 --> 00:16:04,435
Eu só vou importar o FlyInOut.

199
00:16:04,435 --> 00:16:08,920
Então, já que já configuramos as partes restantes aqui,

200
00:16:08,920 --> 00:16:12,665
Eu vou entrar e colar esse código,

201
00:16:12,665 --> 00:16:17,125
e, obviamente, eu tenho duas animações aqui.

202
00:16:17,125 --> 00:16:20,860
Deixe-me cortar a visibilidade daqui e, em seguida, adicionar

203
00:16:20,860 --> 00:16:29,420
-lo na outra animação,

204
00:16:29,420 --> 00:16:35,040
e, em seguida, cortar isso para que eu tenha única propriedade de animação com

205
00:16:35,040 --> 00:16:40,780
tanto FlyInOut e funções de visibilidade tanto sendo incluído e chamado lá,

206
00:16:40,780 --> 00:16:42,630
e, em seguida, a propriedade host.

207
00:16:42,630 --> 00:16:45,625
Agora, vamos salvar as alterações e, em seguida, dar uma olhada em

208
00:16:45,625 --> 00:16:51,370
a nova animação que acabamos de aplicar aos nossos componentes.

209
00:16:51,370 --> 00:16:56,475
Começando com a vista inicial.

210
00:16:56,475 --> 00:16:59,000
Então, temos a visão inicial sendo renderizada aqui.

211
00:16:59,000 --> 00:17:02,500
Deixe-me agora ir rapidamente para a vista Sobre,

212
00:17:02,500 --> 00:17:05,800
e, em seguida, você verá que a vista Sobre apenas desliza para dentro enquanto

213
00:17:05,800 --> 00:17:09,780
a vista Início desliza para a tela aqui.

214
00:17:09,780 --> 00:17:11,810
Da mesma forma, quando eu vou para o menu,

215
00:17:11,810 --> 00:17:16,190
você verá que a exibição Menu desliza para dentro enquanto a exibição Sobre desliza para fora.

216
00:17:16,190 --> 00:17:20,240
É tão rápido que você não percebe como tal.

217
00:17:20,240 --> 00:17:22,740
Da mesma forma, para a vista Contato,

218
00:17:22,740 --> 00:17:24,710
você vê a vista de contato deslizando para dentro.

219
00:17:24,710 --> 00:17:28,940
Então, esse tipo de animação pode ser adicionado usando

220
00:17:28,940 --> 00:17:34,170
esta abordagem que acabamos de ilustrar para sua aplicação Angular.

221
00:17:34,170 --> 00:17:40,375
Ainda não terminamos. Faremos mais uma animação dentro da nossa aplicação.

222
00:17:40,375 --> 00:17:44,955
Para ilustrar o que eu gostaria de fazer na próxima animação,

223
00:17:44,955 --> 00:17:48,495
vamos dar uma olhada rápida no componente do menu.

224
00:17:48,495 --> 00:17:50,780
Então, você vê que quando o componente de menu,

225
00:17:50,780 --> 00:17:54,830
quando o girador está girando e, em seguida, é substituído pela vista,

226
00:17:54,830 --> 00:17:57,180
a vista de repente aparece na tela,

227
00:17:57,180 --> 00:17:59,740
e é um pouco chocante aos olhos.

228
00:17:59,740 --> 00:18:01,230
Talvez você não perceba.

229
00:18:01,230 --> 00:18:03,725
Você pode estar muito feliz com isso.

230
00:18:03,725 --> 00:18:07,340
Mas podemos adicionar de uma forma de atenuação em

231
00:18:07,340 --> 00:18:12,235
que a vista quando os dados são obtidos a partir do servidor e a vista está sendo renderizada em.

232
00:18:12,235 --> 00:18:20,625
Então, quando a variável do prato no meu arquivo component.ts do menu fica não anulado,

233
00:18:20,625 --> 00:18:27,290
então o girador será escondido e, em seguida, a vista do prato,

234
00:18:27,290 --> 00:18:30,320
o menu é construído e, em seguida, colocado para fora.

235
00:18:30,320 --> 00:18:33,060
Então, nós queremos que isso para facilitar na tela.

236
00:18:33,060 --> 00:18:38,820
Então, vamos adicionar mais uma animação para efeito que ambos no componente de menu.

237
00:18:38,820 --> 00:18:42,055
Também aplicaremos a mesma coisa no componente de detalhes do prato.

238
00:18:42,055 --> 00:18:46,540
Também usaremos o mesmo no componente Início e no componente Sobre,

239
00:18:46,540 --> 00:18:51,550
onde estamos obtendo os dados para mostrar a lista de líderes.

240
00:18:51,550 --> 00:18:56,145
Então, onde quer que você esteja obtendo dados do servidor e, em seguida, colocando a vista,

241
00:18:56,145 --> 00:18:57,740
quando a vista aparecer,

242
00:18:57,740 --> 00:19:03,275
queremos facilitar a vista usando esta nova animação que eu vou criar em seguida.

243
00:19:03,275 --> 00:19:06,230
Indo para o arquivo animation.ts app,

244
00:19:06,230 --> 00:19:08,615
Eu vou adicionar em outra função aqui,

245
00:19:08,615 --> 00:19:14,750
e deixe-me chamá-lo de expandir.

246
00:19:14,750 --> 00:19:18,200
Esta função expandirá a vista que está sendo colocada

247
00:19:18,200 --> 00:19:22,370
depois que os dados são obtidos do lado do servidor.

248
00:19:22,370 --> 00:19:24,885
Então, esta vista, novamente,

249
00:19:24,885 --> 00:19:28,370
Eu vou retornar um gatilho aqui.

250
00:19:28,370 --> 00:19:32,280
Vou nomear o gatilho como expandir,

251
00:19:32,280 --> 00:19:37,690
e este gatilho irá criar.

252
00:19:37,890 --> 00:19:40,590
Como definimos este gatilho.

253
00:19:40,590 --> 00:19:49,870
Então, dentro deste gatilho vamos incluir um estado com estrela lá dentro.

254
00:19:49,870 --> 00:19:51,920
Então, não importa qual estado é.

255
00:19:51,920 --> 00:20:00,580
Todos os estados serão renderizados com o estilo como

256
00:20:00,580 --> 00:20:10,420
opacidade uma transformação traduzir x 0.

257
00:20:10,420 --> 00:20:16,430
Então, ele é exibido à direita e centro no meu aplicativo.

258
00:20:17,520 --> 00:20:20,990
Isso deve ser uma cinta lá.

259
00:20:20,990 --> 00:20:23,250
Eu estava olhando para ele e disse,

260
00:20:23,250 --> 00:20:25,735
Por que ele está mostrando uma linha vermelha rabiscada.

261
00:20:25,735 --> 00:20:29,560
Então, quando você está digitando muito rápido você costuma cometer erros lá.

262
00:20:29,560 --> 00:20:31,070
Então, em vez de um colchete quadrado,

263
00:20:31,070 --> 00:20:34,205
que deveria ser uma cinta lá.

264
00:20:34,205 --> 00:20:35,915
Então, esse é o estado.

265
00:20:35,915 --> 00:20:44,925
Então, qualquer estado que será completamente visível e centrado onde deve ser centrado.

266
00:20:44,925 --> 00:20:49,180
Agora, deixe-me ativar uma transição.

267
00:20:49,180 --> 00:20:51,730
Agora, esta transição será acionada apenas

268
00:20:51,730 --> 00:20:55,465
após o enter quando a vista for colocada na tela.

269
00:20:55,465 --> 00:21:00,740
A parte de saída já estamos fazendo isso na animação de rota, então não precisamos disso.

270
00:21:00,740 --> 00:21:03,060
Só precisamos do inter part para esta vista porque

271
00:21:03,060 --> 00:21:06,575
a vista é renderizada nesta tela lá.

272
00:21:06,575 --> 00:21:08,435
Então, no enter,

273
00:21:08,435 --> 00:21:14,625
Eu vou definir a transição apropriadamente.

274
00:21:14,625 --> 00:21:18,860
Então, na transição o que eu quero fazer?

275
00:21:18,860 --> 00:21:27,260
Quero aplicar a mesma abordagem que usei com a transição enter aqui.

276
00:21:27,260 --> 00:21:32,600
Então, eu vou apenas copiar isso e, em seguida, fazer alguns pequenos ajustes no código lá.

277
00:21:32,600 --> 00:21:36,335
Então, para a transição enter aqui também,

278
00:21:36,335 --> 00:21:38,490
Eu quero aplicar a mesma coisa.

279
00:21:38,490 --> 00:21:42,040
Eu vou dizer traduzir Insta de 100 por cento.

280
00:21:42,040 --> 00:21:46,630
Eu vou apenas usar 50 por cento e, em seguida, eu vou fazer a tradução Y.

281
00:21:46,630 --> 00:21:52,460
Então, o que significa que esta visão vai cair do top 50 precent começando com

282
00:21:52,460 --> 00:21:58,655
opacidade zero e então eu vou aliviá-lo em um pouco mais rápido tempo,

283
00:21:58,655 --> 00:22:04,200
200 milissegundos e vai facilitar em nossa aplicação.

284
00:22:04,200 --> 00:22:09,640
Agora, então, você vê o pequeno ajuste para o código aqui.

285
00:22:09,640 --> 00:22:14,845
Então, traduzir menos 50 por cento e opacidade zero e

286
00:22:14,845 --> 00:22:21,025
é aliviado em 200 milissegundos e, em seguida, nesse ponto,

287
00:22:21,025 --> 00:22:27,105
eu posso aplicar este estilo como este mesmo estilo.

288
00:22:27,105 --> 00:22:32,240
Vou me inscrever lá. Então, eu vou apenas copiar esse estilo e, em seguida, aplicar esse estilo lá.

289
00:22:32,240 --> 00:22:34,440
Então, quando for facilitado,

290
00:22:34,440 --> 00:22:40,115
ele entrará e será completamente visível onde deveria estar.

291
00:22:40,115 --> 00:22:43,735
Então, esta é a função de expansão que eu defini aqui.

292
00:22:43,735 --> 00:22:45,950
Então, onde eu quero fazer uso desta função?

293
00:22:45,950 --> 00:22:52,060
Vamos primeiro para o componente de menu e dentro do componente de menu,

294
00:22:52,060 --> 00:22:55,530
Eu vou agora também importar isso,

295
00:22:55,530 --> 00:23:04,595
expandir e, em seguida, adicioná-lo em minhas animações e, em seguida, como faço para aplicar esta expansão?

296
00:23:04,595 --> 00:23:08,160
Então, indo para esse arquivo de modelo de componentes do menu.

297
00:23:08,160 --> 00:23:09,925
No arquivo de modelo,

298
00:23:09,925 --> 00:23:12,840
Vou aplicar a expansão para

299
00:23:12,840 --> 00:23:20,435
a lista de grade onde estou aplicando isso.

300
00:23:20,435 --> 00:23:24,960
Então, deixe-me copiar isso e, em seguida, também vamos

301
00:23:24,960 --> 00:23:32,230
para o componente de casa e dentro do componente de casa também,

302
00:23:32,230 --> 00:23:42,590
Eu vou incluir a expansão e, em seguida, adicionar a expansão para a animação,

303
00:23:43,430 --> 00:23:49,475
e, em seguida, ir para o arquivo de modelo de componentes de casa e então eu vou aplicar

304
00:23:49,475 --> 00:23:57,060
que expandir para os componentes do prato cartão MD,

305
00:23:57,060 --> 00:24:02,695
para os componentes de promoção cartão MD e também para o líder

306
00:24:02,695 --> 00:24:05,580
componentes cartão MD aqui porque todos esses

307
00:24:05,580 --> 00:24:09,880
três serão buscados no futuro do servidor e, em seguida, renderizados.

308
00:24:09,880 --> 00:24:15,075
Então, os dados dos componentes do prato já estão sendo obtidos do servidor.

309
00:24:15,075 --> 00:24:20,080
Agora, a mesma coisa vai para o componente DishDetail.

310
00:24:20,080 --> 00:24:27,000
Eu vou adicionar na expansão para as importações e, em seguida, adicionar

311
00:24:27,000 --> 00:24:35,530
uma expansão na animação indo para a exibição do componente DishDetail.

312
00:24:35,530 --> 00:24:37,415
Junto com uma visibilidade,

313
00:24:37,415 --> 00:24:40,095
Eu também vou aplicar a expandir para

314
00:24:40,095 --> 00:24:47,705
o div cartão lá e, em seguida, para os comentários div também aqui.

315
00:24:47,705 --> 00:24:50,720
Isso está no componente DishDetail.

316
00:24:50,720 --> 00:24:54,530
O componente de contato não tem nada que está sendo obtido do servidor.

317
00:24:54,530 --> 00:25:00,265
Então, eu vou apenas passar para o componente sobre e no componente sobre também,

318
00:25:00,265 --> 00:25:08,680
Eu vou incluir a expansão e também nas animações.

319
00:25:08,680 --> 00:25:12,870
Indo para o arquivo de modelo sobre componentes aqui este teste

320
00:25:12,870 --> 00:25:17,190
aqui que mostra os líderes estão sendo obtidos do lado do servidor.

321
00:25:17,190 --> 00:25:20,310
Então, eu vou aplicar a expansão sobre isso.

322
00:25:20,310 --> 00:25:23,250
Vamos salvar as alterações e, em seguida, ir e dar

323
00:25:23,250 --> 00:25:26,960
uma olhada em nossa aplicação angular no navegador.

324
00:25:26,960 --> 00:25:29,235
Indo para a nossa aplicação angular.

325
00:25:29,235 --> 00:25:31,665
Agora, quando você vai para o modelo inicial,

326
00:25:31,665 --> 00:25:34,700
você pode ver que os cartões quando eles foram buscados,

327
00:25:34,700 --> 00:25:38,070
eles deslizaram para a minha visão lá.

328
00:25:38,070 --> 00:25:40,970
Agora, da mesma forma quando você vai para o componente sobre,

329
00:25:40,970 --> 00:25:45,050
você vê que uma vez que os dados são obtidos do servidor,

330
00:25:45,050 --> 00:25:50,470
então a renderização dos vários líderes está sendo

331
00:25:50,470 --> 00:25:56,590
desliza sempre tão lentamente em posição nesta vista aqui.

332
00:25:56,590 --> 00:25:58,905
Da mesma forma, indo para o componente menu,

333
00:25:58,905 --> 00:26:01,270
veremos um mesmo comportamento aqui.

334
00:26:01,270 --> 00:26:03,595
Assim, uma vez que os dados do menu estão prontos,

335
00:26:03,595 --> 00:26:07,065
o componente do menu desliza para o lugar ali mesmo.

336
00:26:07,065 --> 00:26:09,980
Mesma coisa com os componentes detalhe prato.

337
00:26:09,980 --> 00:26:12,490
Então, deixe-me ir para o componente DishDetail e você verá que

338
00:26:12,490 --> 00:26:15,250
a vista desliza no lugar lá, mas a

339
00:26:15,250 --> 00:26:18,495
outra animação que estava

340
00:26:18,495 --> 00:26:22,625
desaparecendo e reaparecendo essa parte ainda funciona exatamente como antes.

341
00:26:22,625 --> 00:26:32,755
Então, você vê que nós introduzimos mais uma animação em nosso aplicativo Angular.

342
00:26:32,755 --> 00:26:38,555
Agora, se você gosta disso ou você quer fazer uma maneira mais elaborada de fazer animações,

343
00:26:38,555 --> 00:26:41,605
certamente, você pode enlouquecer com

344
00:26:41,605 --> 00:26:45,395
fazendo muitos tipos diferentes de coisas com sua animação.

345
00:26:45,395 --> 00:26:52,395
Alterando muitas propriedades diferentes dentro dos estilos como de que maneira você gosta e assim por diante.

346
00:26:52,395 --> 00:26:57,060
Mas eu senti que algumas animações sutis aqui e ali vai

347
00:26:57,060 --> 00:27:02,390
ajudar a melhorar a interface do usuário para minha aplicação angular.

348
00:27:02,390 --> 00:27:08,195
Então, adicionei mais duas novas animações ao meu aplicativo Angular.

349
00:27:08,195 --> 00:27:14,535
Com isso, completamos a segunda parte do nosso exercício de animações.

350
00:27:14,535 --> 00:27:18,240
Espero que com estas duas partes de exercício,

351
00:27:18,240 --> 00:27:21,280
você tenha entendido melhor sobre como fazer uso de animações

352
00:27:21,280 --> 00:27:24,555
dentro da sua aplicação Angular.

353
00:27:24,555 --> 00:27:32,040
Este é um bom momento para você fazer um commit git com a mensagem, animações parte dois.