1
00:00:03,680 --> 00:00:09,920
Continuando con nuestro ejercicio de animación de la primera parte anterior.

2
00:00:09,920 --> 00:00:15,470
Añadimos más animaciones a nuestra aplicación angular.

3
00:00:15,470 --> 00:00:19,515
En particular, añadiremos una animación que se activará

4
00:00:19,515 --> 00:00:24,440
cuando los cambios de ruta se produzcan dentro de nuestra aplicación de una sola página.

5
00:00:24,440 --> 00:00:28,125
También agregaremos una animación que permite

6
00:00:28,125 --> 00:00:32,595
una vista que se muestre cuando los datos se obtienen desde el lado del servidor,

7
00:00:32,595 --> 00:00:39,535
por lo que cuando usted está descartando el spinner en su vista y luego renderizando la vista,

8
00:00:39,535 --> 00:00:42,395
queremos que la vista se proyecte en la pantalla

9
00:00:42,395 --> 00:00:45,710
en lugar de simplemente aparecer todos los de repente.

10
00:00:45,710 --> 00:00:49,774
Así que, un par de nuevas animaciones que vamos a añadir en este ejercicio.

11
00:00:49,774 --> 00:00:54,440
En el camino cuando tiene múltiples animaciones en su aplicación,

12
00:00:54,440 --> 00:00:57,800
puede ser mejor refactorizar el código de una manera que sea más

13
00:00:57,800 --> 00:01:01,190
manejable en lugar de incluir

14
00:01:01,190 --> 00:01:05,210
fragmentario cada poco de un disparador en cada uno de los archivos

15
00:01:05,210 --> 00:01:09,460
dentro de nuestros componentes de nuestra aplicación angular.

16
00:01:09,460 --> 00:01:15,880
Por lo tanto, hagamos todos estos pasos como parte dos del ejercicio de animación.

17
00:01:15,880 --> 00:01:20,750
Lo primero que voy a hacer es refactorizar

18
00:01:20,750 --> 00:01:26,705
el código que ya hemos hecho como parte uno de este ejercicio de animaciones.

19
00:01:26,705 --> 00:01:32,790
Este enfoque que les estoy ilustrando aquí es solo mi enfoque sugerido.

20
00:01:32,790 --> 00:01:36,080
No necesariamente tienes que seguir exactamente de esta manera,

21
00:01:36,080 --> 00:01:40,460
, pero siento que esto ayuda a organizar el código mucho mejor.

22
00:01:40,460 --> 00:01:45,050
Entonces, lo que voy a hacer es como si tuviéramos una carpeta separada para servicios,

23
00:01:45,050 --> 00:01:49,040
teníamos una carpeta separada para los recursos compartidos y así sucesivamente,

24
00:01:49,040 --> 00:01:51,975
Voy a crear una nueva carpeta llamada animaciones.

25
00:01:51,975 --> 00:01:57,200
Almacenaremos todo el código relacionado con la animación allí y luego haremos uso de él importándolo

26
00:01:57,200 --> 00:02:03,065
donde sea necesario dentro de nuestros componentes en nuestra aplicación angular.

27
00:02:03,065 --> 00:02:05,865
Entonces, yendo a nuestro código,

28
00:02:05,865 --> 00:02:12,615
dentro de la carpeta de la aplicación, voy a crear una nueva carpeta y nombrarla Animaciones.

29
00:02:12,615 --> 00:02:15,115
Dentro de esta carpeta Animations,

30
00:02:15,115 --> 00:02:20,540
voy a crear un nuevo archivo y por falta de una palabra mejor

31
00:02:20,540 --> 00:02:26,940
lo llamaré archivo app.animation.ts.

32
00:02:27,060 --> 00:02:31,915
Luego, dentro de esto, voy a importar

33
00:02:31,915 --> 00:02:38,865
las diversas clases de animaciones angulares que hice en el componente DishDetail.

34
00:02:38,865 --> 00:02:41,135
Así que, yendo al componente DishDetail,

35
00:02:41,135 --> 00:02:43,700
recordará que lo primero que hice

36
00:02:43,700 --> 00:02:46,640
fue agregar esta línea al componente DishDetail.

37
00:02:46,640 --> 00:02:49,685
Voy a cortarlo del componente DishDetail y

38
00:02:49,685 --> 00:02:53,035
en lugar de pegarlo en las animaciones de la aplicación,

39
00:02:53,035 --> 00:02:57,765
para que dondequiera que se incluyan estas animaciones de la aplicación

40
00:02:57,765 --> 00:03:03,090
importándolas a nuestros otros componentes,

41
00:03:03,090 --> 00:03:05,640
esto vendrá automáticamente por la derecha allí.

42
00:03:05,640 --> 00:03:07,750
Ahora, dentro de esta aplicación animaciones,

43
00:03:07,750 --> 00:03:12,000
voy a crear algunas funciones de fábrica que exportarán los diversos disparadores.

44
00:03:12,000 --> 00:03:14,495
La primera función de fábrica que voy a crear

45
00:03:14,495 --> 00:03:22,660
esta función de exportación y llamarla visibilidad.

46
00:03:23,000 --> 00:03:27,290
Esta función de visibilidad devolverá el código

47
00:03:27,290 --> 00:03:32,070
correspondiente al disparador que hemos hecho en el componente DishDetail.

48
00:03:32,070 --> 00:03:34,455
Entonces, volviendo al componente DishDetail,

49
00:03:34,455 --> 00:03:44,520
solo voy a cortar todo este código para el disparador desde aquí y luego volver al archivo

50
00:03:44,520 --> 00:03:48,800
app animation.ts y luego pegarlo en

51
00:03:48,800 --> 00:03:55,825
lugar justo allí en la función aquí.

52
00:03:55,825 --> 00:04:02,530
Esto ahora se convierte en una función que está disponible para importar desde mi componente DishDetail.

53
00:04:02,530 --> 00:04:06,840
Entonces, volviendo al componente dishDetail.

54
00:04:06,840 --> 00:04:12,640
Ahora, en el lugar donde importé el disparador y otras clases,

55
00:04:12,640 --> 00:04:19,030
voy a importar ahora la visibilidad

56
00:04:19,030 --> 00:04:30,475
de la aplicación de animación, animación,

57
00:04:30,475 --> 00:04:35,300
y por lo que esa función ahora estará disponible para mí dentro de mi código aquí.

58
00:04:35,300 --> 00:04:38,164
Entonces, una vez que lo hago dentro de mis animaciones,

59
00:04:38,164 --> 00:04:42,560
simplemente puedo llamar a esa función para poder decir

60
00:04:42,560 --> 00:04:49,515
visibilidad y luego el código de activación ahora se convierte en parte de mi componente aquí.

61
00:04:49,515 --> 00:04:55,360
Ahora, esto encuentro que es una mejor manera de organizar el código para mis animaciones.

62
00:04:55,360 --> 00:04:59,400
Ahora, si necesito usar el mismo disparador en otro componente,

63
00:04:59,400 --> 00:05:07,545
simplemente puedo seguir este enfoque para incluirlo en mis otros componentes también.

64
00:05:07,545 --> 00:05:09,800
Vamos a guardar los cambios y luego ir y tomar

65
00:05:09,800 --> 00:05:13,020
un vistazo rápido a nuestra aplicación en el navegador.

66
00:05:13,020 --> 00:05:18,460
Vaya al navegador, verá que cuando vaya al componente de disco,

67
00:05:18,460 --> 00:05:21,215
el componente de disco está allí y luego

68
00:05:21,215 --> 00:05:24,810
tendrá el mismo comportamiento de animación que antes.

69
00:05:24,810 --> 00:05:26,640
Entonces, al refactorizar el código,

70
00:05:26,640 --> 00:05:31,085
he logrado que el código esté mejor organizado y

71
00:05:31,085 --> 00:05:36,385
todavía funciona exactamente igual que la primera parte de este ejercicio.

72
00:05:36,385 --> 00:05:41,875
Si solo tenía una sola animación utilizada en un solo lugar,

73
00:05:41,875 --> 00:05:44,870
entonces el enfoque anterior funciona bien, pero si tiene

74
00:05:44,870 --> 00:05:48,800
múltiple y especialmente si está reutilizando el código en muchos componentes,

75
00:05:48,800 --> 00:05:55,160
entonces este enfoque refactorizado es una forma mucho mejor de implementar la solución.

76
00:05:55,160 --> 00:06:00,250
La próxima actualización que voy a hacer es agregar animaciones en los cambios de ruta.

77
00:06:00,250 --> 00:06:04,670
Entonces, cuando voy de una vista a otra vista, así, por ejemplo,

78
00:06:04,670 --> 00:06:11,145
de la casa a la acerca o a punto de menú o menú para contactar o viceversa,

79
00:06:11,145 --> 00:06:15,350
entonces quiero ser capaz de animar estos cambios dentro de mi aplicación.

80
00:06:15,350 --> 00:06:16,430
Entonces, para hacer eso,

81
00:06:16,430 --> 00:06:22,480
introduciré otra función en el archivo animation.ts de la aplicación.

82
00:06:22,480 --> 00:06:24,980
Entonces, entrando en el archivo animation.ts de la aplicación,

83
00:06:24,980 --> 00:06:33,210
exportaré otra función que llamo como FlyInOut,

84
00:06:34,570 --> 00:06:39,325
verá por qué uso este nombre aquí.

85
00:06:39,325 --> 00:06:49,150
Entonces esto devolvería una función que es un disparador con el nombre FlyInOut.

86
00:06:49,820 --> 00:06:52,380
Entonces, dentro estaba trigger,

87
00:06:52,380 --> 00:06:58,710
voy a definir el código para lo que este disparador va a hacer.

88
00:06:59,620 --> 00:07:10,015
Así que, aquí, voy a definir un estado aquí con el nombre estrella,

89
00:07:10,015 --> 00:07:12,445
por lo que no importa qué estado es,

90
00:07:12,445 --> 00:07:16,820
esto es aplicable a cualquier estado y luego voy a definir

91
00:07:16,820 --> 00:07:22,610
algunos estilos aquí y los dos estilos que

92
00:07:22,610 --> 00:07:26,600
definiré es opacidad es uno

93
00:07:26,600 --> 00:07:36,915
y transformar es TransLatex (0),

94
00:07:36,915 --> 00:07:41,355
de modo que significa que está en su posición normal en este caso.

95
00:07:41,355 --> 00:07:45,270
Ahora, cuando defino transiciones,

96
00:07:45,270 --> 00:07:50,880
también puedo definir transiciones de esta manera.

97
00:07:50,990 --> 00:07:55,090
Entonces, si digo entrar en transición,

98
00:07:55,090 --> 00:07:59,240
la transición entrar es una abreviatura para decir ir de

99
00:07:59,240 --> 00:08:03,190
estado vacío a uno de los estados existentes.

100
00:08:03,190 --> 00:08:06,890
Entonces, lo que significa que la vista está entrando en mi aplicación.

101
00:08:06,890 --> 00:08:10,655
Así que entra, lo que significa que ahora cuando camino a

102
00:08:10,655 --> 00:08:15,450
una vista particular en mi aplicación de una sola página,

103
00:08:15,450 --> 00:08:18,500
esa vista entrará en la vista.

104
00:08:18,500 --> 00:08:24,325
Entonces, es por eso que puedo aplicar la transición de dos puntos en ese caso.

105
00:08:24,325 --> 00:08:27,725
Ahora de manera similar, hay otra transición llamada colon

106
00:08:27,725 --> 00:08:31,790
leave que puedo aplicar cuando se pasa de

107
00:08:31,790 --> 00:08:40,580
esta vista y luego se está tomando la vista desde la salida del enrutador de su aplicación.

108
00:08:40,580 --> 00:08:46,950
Así que vamos a hacer tanto entrar como el otro que es salir.

109
00:08:52,760 --> 00:08:56,555
Entonces, dos funciones que voy a definir aquí,

110
00:08:56,555 --> 00:09:00,155
transición entrar y transición salir aquí.

111
00:09:00,155 --> 00:09:01,730
Entonces, para el enter,

112
00:09:01,730 --> 00:09:04,150
¿qué quiero definir?

113
00:09:04,150 --> 00:09:09,330
Para entrar, déjame definir la función aquí,

114
00:09:09,330 --> 00:09:11,800
y de manera similar, para salir también,

115
00:09:11,800 --> 00:09:15,815
voy a definir las funciones aquí.

116
00:09:15,815 --> 00:09:18,955
Así que, creando este andamio aquí.

117
00:09:18,955 --> 00:09:25,810
Ahora, puedo introducir la información que quiero dentro de estas transiciones.

118
00:09:25,810 --> 00:09:28,025
Entonces, cuando se produzca esta transición,

119
00:09:28,025 --> 00:09:35,590
comenzaré con un estilo de transformación,

120
00:09:36,920 --> 00:09:42,495
TransLatex menos 100 por ciento,

121
00:09:42,495 --> 00:09:47,680
lo que significa que la vista está completamente fuera de la vista aquí.

122
00:09:47,680 --> 00:09:52,205
Así que empiezas desde menos 100 por ciento en este momento.

123
00:09:52,205 --> 00:09:53,930
Así que, cuando estés entrando,

124
00:09:53,930 --> 00:09:55,590
comenzarás con eso,

125
00:09:55,590 --> 00:09:58,710
y luego también en este punto,

126
00:09:58,710 --> 00:10:03,530
animaré, y animaré en 500.

127
00:10:03,530 --> 00:10:05,710
Entonces, cuando especifico 500 como este,

128
00:10:05,710 --> 00:10:07,960
incluso puedes hacerlo de esta manera.

129
00:10:07,960 --> 00:10:10,995
Alternativamente, puedes decir, entre comillas,

130
00:10:10,995 --> 00:10:16,900
«500ms», y luego incluso puedes usar facilidad de acceso o facilidad de salida.

131
00:10:16,900 --> 00:10:19,400
Entonces, permítanme modificar esto en

132
00:10:19,400 --> 00:10:28,980
500ms fácil de entrar porque esta vista está llegando.

133
00:10:28,980 --> 00:10:30,790
Por lo tanto, vamos a facilitar la vista.

134
00:10:30,790 --> 00:10:37,610
Así que, para el permiso, voy a aplicar la transición como animado,

135
00:10:37,610 --> 00:10:45,640
y luego diría 500 milisegundos, de nuevo, fácil de salir.

136
00:10:45,640 --> 00:10:47,740
Entonces, este punto de vista se va.

137
00:10:47,740 --> 00:10:50,350
Por lo tanto, queremos facilitar esa vista.

138
00:10:50,350 --> 00:10:52,365
Entonces, en este caso,

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

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

141
00:11:04,670 --> 00:11:09,590
TransLatex 100 por ciento.

142
00:11:09,590 --> 00:11:15,370
Por lo tanto, esta vista desaparecerá por completo de la pantalla allí.

143
00:11:15,370 --> 00:11:18,055
TransLatex 100 por ciento.

144
00:11:18,055 --> 00:11:23,000
Además, estableceré la opacidad en cero.

145
00:11:23,000 --> 00:11:25,615
Por lo tanto, desaparece por completo de la pantalla.

146
00:11:25,615 --> 00:11:31,140
Por lo tanto, esta animación agregará una buena nueva característica aquí.

147
00:11:31,140 --> 00:11:33,570
Ahora, para este también,

148
00:11:33,570 --> 00:11:40,825
puedo agregar, comenzando con una opacidad de cero, si lo prefiere.

149
00:11:40,825 --> 00:11:43,730
Vamos a añadir eso y ver cómo se ve.

150
00:11:43,730 --> 00:11:48,895
Entonces, este es el disparador FlyInOut que he definido aquí.

151
00:11:48,895 --> 00:11:50,910
Ahora, obviamente se está preguntando,

152
00:11:50,910 --> 00:11:53,690
¿cómo uso este FlyInOut y luego aplico

153
00:11:53,690 --> 00:11:56,650
esto para enrutar transiciones en mi aplicación?

154
00:11:56,650 --> 00:11:59,815
Entonces, para hacer eso, vamos a, primero,

155
00:11:59,815 --> 00:12:03,055
comenzando con el archivo component.ts de menú.

156
00:12:03,055 --> 00:12:04,810
Voy a importar

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

158
00:12:14,730 --> 00:12:25,820
de la animación de la aplicación.

159
00:12:27,090 --> 00:12:31,230
Luego, yendo al componente,

160
00:12:31,230 --> 00:12:35,425
ahora voy a introducir una nueva propiedad llamada como anfitrión.

161
00:12:35,425 --> 00:12:39,445
Te diré lo que entra en el anfitrión en poco tiempo.

162
00:12:39,445 --> 00:12:42,939
Entonces, también incluiremos la propiedad de animaciones,

163
00:12:42,939 --> 00:12:45,470
que es una matriz aquí.

164
00:12:45,470 --> 00:12:50,980
Entonces, dentro de aquí, usaré el FlyInOut que acabamos de importar.

165
00:12:50,980 --> 00:12:59,325
Por lo tanto, este disparador de animación se aplicará para este componente multimedia.

166
00:12:59,325 --> 00:13:00,660
Ahora, dentro del host,

167
00:13:00,660 --> 00:13:07,975
así que así es como me aseguro de que esta animación en particular ocurra cuando se producen cambios de ruta.

168
00:13:07,975 --> 00:13:11,215
Así que, dentro de este anfitrión aquí,

169
00:13:11,215 --> 00:13:15,560
suministro esto como diciendo,

170
00:13:17,070 --> 00:13:22,705
@flyInOut y decir verdad,

171
00:13:22,705 --> 00:13:28,730
y esto debería estar entre comillas también,

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

173
00:13:42,000 --> 00:13:45,595
display block.

174
00:13:45,595 --> 00:13:52,330
Por lo tanto, estos dos deben aplicarse dentro de la propiedad de host aquí.

175
00:13:52,330 --> 00:13:56,410
Ahora, cuando hagamos esto, mi componente de menú comenzará ahora a animar

176
00:13:56,410 --> 00:14:00,440
cuando me dirijo al componente de menú,

177
00:14:00,440 --> 00:14:02,965
y luego también cuando salga del componente de menú.

178
00:14:02,965 --> 00:14:10,705
Ahora, aplicaré lo mismo a los componentes restantes de mi aplicación Angular.

179
00:14:10,705 --> 00:14:12,720
Entonces, lo que haré es,

180
00:14:12,720 --> 00:14:15,260
simplemente copiaré esto,

181
00:14:15,850 --> 00:14:20,910
y luego aplicaremos esto al componente sobre.

182
00:14:20,910 --> 00:14:23,545
Entonces, iré al componente sobre.

183
00:14:23,545 --> 00:14:25,555
Dentro del decorador de componentes,

184
00:14:25,555 --> 00:14:28,650
he incluido la información aquí,

185
00:14:28,650 --> 00:14:34,070
y ves la línea roja que me recuerda que necesito importar

186
00:14:34,080 --> 00:14:42,255
FlyInOut de animaciones, animación de aplicaciones.

187
00:14:42,255 --> 00:14:46,410
Entonces, el mismo enfoque, sobre el componente,

188
00:14:46,410 --> 00:14:52,080
luego dentro del componente de contacto también, lo mismo,

189
00:15:08,840 --> 00:15:17,980
y luego aplicar las propiedades de host y animación al decorador del componente,

190
00:15:17,980 --> 00:15:21,660
y luego ¿qué más tenemos?

191
00:15:21,660 --> 00:15:28,040
El componente de casa. Vayamos al componente de inicio y repitamos lo mismo aquí.

192
00:15:28,040 --> 00:15:33,385
Voy a añadir en el host y la propiedad de animaciones,

193
00:15:33,385 --> 00:15:36,210
y luego seguir adelante e importar

194
00:15:36,210 --> 00:15:50,210
FlyInOut, desde la animación de la aplicación.

195
00:15:50,350 --> 00:15:56,235
¿Nos perdimos alguna? Oh, también tenemos que actualizar el componente de detalle del plato.

196
00:15:56,235 --> 00:15:58,360
Entonces, déjame ir al componente de detalle del plato.

197
00:15:58,360 --> 00:16:00,840
Puesto que ya tenemos la visibilidad allí,

198
00:16:00,840 --> 00:16:04,435
solo voy a importar el FlyInOut.

199
00:16:04,435 --> 00:16:08,920
Entonces, ya que ya hemos configurado las partes restantes aquí,

200
00:16:08,920 --> 00:16:12,665
voy a entrar y pegar ese código,

201
00:16:12,665 --> 00:16:17,125
y obviamente, tengo dos animaciones aquí.

202
00:16:17,125 --> 00:16:20,860
Permítanme cortar la visibilidad desde aquí y luego agregarlo

203
00:16:20,860 --> 00:16:29,420
a la otra animación,

204
00:16:29,420 --> 00:16:35,040
y luego cortar esto para que tenga una sola propiedad de animación con

205
00:16:35,040 --> 00:16:40,780
tanto FlyInOut como funciones de visibilidad incluidas y llamadas allí,

206
00:16:40,780 --> 00:16:42,630
y luego la propiedad del host.

207
00:16:42,630 --> 00:16:45,625
Ahora, vamos a guardar los cambios y luego echar un vistazo a

208
00:16:45,625 --> 00:16:51,370
la nueva animación que acabamos de aplicar a nuestros componentes.

209
00:16:51,370 --> 00:16:56,475
Comenzando con la vista de casa.

210
00:16:56,475 --> 00:16:59,000
Por lo tanto, tenemos la vista de casa siendo renderizada aquí.

211
00:16:59,000 --> 00:17:02,500
Permítanme ahora ir rápidamente a la vista Acerca de,

212
00:17:02,500 --> 00:17:05,800
y luego verá que la vista Acerca de sólo se desliza mientras

213
00:17:05,800 --> 00:17:09,780
la vista Inicio se desliza hacia fuera en la pantalla aquí.

214
00:17:09,780 --> 00:17:11,810
Del mismo modo, cuando vaya al menú,

215
00:17:11,810 --> 00:17:16,190
verá que la vista Menú se desliza mientras que la vista Acerca se desliza hacia fuera.

216
00:17:16,190 --> 00:17:20,240
Es tan rápido que no te das cuenta como tal.

217
00:17:20,240 --> 00:17:22,740
Del mismo modo, para la vista Contacto,

218
00:17:22,740 --> 00:17:24,710
verá la vista de contacto deslizándose en.

219
00:17:24,710 --> 00:17:28,940
Entonces, este tipo de animación se puede agregar usando

220
00:17:28,940 --> 00:17:34,170
este enfoque que acabamos de ilustrar para su aplicación Angular.

221
00:17:34,170 --> 00:17:40,375
Aún no hemos terminado. Haremos una animación más dentro de nuestra aplicación.

222
00:17:40,375 --> 00:17:44,955
Para ilustrar lo que me gustaría hacer en la próxima animación,

223
00:17:44,955 --> 00:17:48,495
vamos a echar un vistazo rápido en el componente de menú.

224
00:17:48,495 --> 00:17:50,780
Entonces, ves que cuando el componente de menú,

225
00:17:50,780 --> 00:17:54,830
cuando el spinner está girando y luego es reemplazado por la vista,

226
00:17:54,830 --> 00:17:57,180
la vista aparece de repente en la pantalla,

227
00:17:57,180 --> 00:17:59,740
y es un poco irritante para el ojo.

228
00:17:59,740 --> 00:18:01,230
Puede que no lo note.

229
00:18:01,230 --> 00:18:03,725
Puede que estés muy contento con eso.

230
00:18:03,725 --> 00:18:07,340
Pero podemos agregar en una forma de facilitar en

231
00:18:07,340 --> 00:18:12,235
esa vista cuando los datos se obtienen del servidor y la vista se está procesando en.

232
00:18:12,235 --> 00:18:20,625
Entonces, cuando la variable del plato en mi archivo component.ts de menú no se anule,

233
00:18:20,625 --> 00:18:27,290
entonces el spinner estará oculto y luego la vista del plato,

234
00:18:27,290 --> 00:18:30,320
el menú se construye y luego se presenta.

235
00:18:30,320 --> 00:18:33,060
Por lo tanto, queremos que se facilite en la pantalla.

236
00:18:33,060 --> 00:18:38,820
Por lo tanto, vamos a añadir una animación más para hacer que ambos en el componente de menú.

237
00:18:38,820 --> 00:18:42,055
También aplicaremos lo mismo en el componente de detalle del plato.

238
00:18:42,055 --> 00:18:46,540
También usaremos lo mismo en el componente Home también y en el componente About,

239
00:18:46,540 --> 00:18:51,550
, donde vamos a buscar los datos para mostrar la lista de líderes.

240
00:18:51,550 --> 00:18:56,145
Así que, dondequiera que esté buscando datos del servidor y luego diseñando la vista,

241
00:18:56,145 --> 00:18:57,740
cuando aparezca la vista,

242
00:18:57,740 --> 00:19:03,275
queremos facilitar la vista usando esta nueva animación que voy a crear a continuación.

243
00:19:03,275 --> 00:19:06,230
Al ir al archivo animation.ts de la aplicación,

244
00:19:06,230 --> 00:19:08,615
voy a agregar en otra función aquí,

245
00:19:08,615 --> 00:19:14,750
y déjame llamarlo ampliar.

246
00:19:14,750 --> 00:19:18,200
Esta función expandirá la vista que se está preparando

247
00:19:18,200 --> 00:19:22,370
después de que los datos se obtienen desde el lado del servidor.

248
00:19:22,370 --> 00:19:24,885
Así que, este punto de vista, de nuevo,

249
00:19:24,885 --> 00:19:28,370
Voy a devolver un disparador aquí.

250
00:19:28,370 --> 00:19:32,280
Voy a nombrar el desencadenador como expand,

251
00:19:32,280 --> 00:19:37,690
y este desencadenador creará.

252
00:19:37,890 --> 00:19:40,590
¿Cómo definimos este disparador?

253
00:19:40,590 --> 00:19:49,870
Así que, dentro de este gatillo vamos a incluir un estado con estrella allí.

254
00:19:49,870 --> 00:19:51,920
Por lo tanto, no importa qué estado es.

255
00:19:51,920 --> 00:20:00,580
Todos los estados se representarán con el estilo como

256
00:20:00,580 --> 00:20:10,420
opacidad una transformación traducir x 0.

257
00:20:10,420 --> 00:20:16,430
Por lo tanto, se muestra a la derecha y el centro en mi aplicación.

258
00:20:17,520 --> 00:20:20,990
Eso debería ser un corsé allí.

259
00:20:20,990 --> 00:20:23,250
Lo estaba mirando y dijo,

260
00:20:23,250 --> 00:20:25,735
¿Por qué está mostrando una línea roja?

261
00:20:25,735 --> 00:20:29,560
Por lo tanto, cuando escribes muy rápido, a menudo cometes errores allí.

262
00:20:29,560 --> 00:20:31,070
Así que, en lugar de un corchete cuadrado,

263
00:20:31,070 --> 00:20:34,205
debería ser un corchete allí.

264
00:20:34,205 --> 00:20:35,915
Entonces, ese es el estado.

265
00:20:35,915 --> 00:20:44,925
Entonces, cualquier estado que sea completamente visible y centrado donde debería estar centrado.

266
00:20:44,925 --> 00:20:49,180
Ahora, permítanme desencadenar una transición.

267
00:20:49,180 --> 00:20:51,730
Ahora, esta transición se activará sólo

268
00:20:51,730 --> 00:20:55,465
al entrar cuando la vista se presenta en la pantalla.

269
00:20:55,465 --> 00:21:00,740
La parte de salida que ya estamos haciendo en la animación de ruta, así que no necesitamos eso.

270
00:21:00,740 --> 00:21:03,060
Sólo necesitamos la parte inter para esta vista porque

271
00:21:03,060 --> 00:21:06,575
la vista se representa en esta pantalla allí.

272
00:21:06,575 --> 00:21:08,435
Así que, en el enter,

273
00:21:08,435 --> 00:21:14,625
voy a definir la transición apropiadamente.

274
00:21:14,625 --> 00:21:18,860
Entonces, en la transición, ¿qué quiero hacer?

275
00:21:18,860 --> 00:21:27,260
Quiero aplicar el mismo enfoque que he usado con la transición enter aquí.

276
00:21:27,260 --> 00:21:32,600
Entonces, solo voy a copiar esto y luego hacer algunos ajustes menores al código allí.

277
00:21:32,600 --> 00:21:36,335
Entonces, para la transición de entrar aquí también,

278
00:21:36,335 --> 00:21:38,490
quiero aplicar lo mismo.

279
00:21:38,490 --> 00:21:42,040
Diré traducir Insta del 100 por ciento.

280
00:21:42,040 --> 00:21:46,630
Voy a usar el 50 por ciento y luego voy a hacer la traducción Y.

281
00:21:46,630 --> 00:21:52,460
Así que, lo que significa que esta vista caerá desde el top 50 precent comenzando con

282
00:21:52,460 --> 00:21:58,655
opacidad cero y luego lo aliviaré en un tiempo un poco más rápido,

283
00:21:58,655 --> 00:22:04,200
200 milisegundos y lo facilitará en nuestra aplicación.

284
00:22:04,200 --> 00:22:09,640
Ahora, por lo tanto, verá el ajuste menor al código aquí.

285
00:22:09,640 --> 00:22:14,845
Por lo tanto, traducir menos 50 por ciento y opacidad cero y

286
00:22:14,845 --> 00:22:21,025
se suaviza en 200 milisegundos y luego en ese punto,

287
00:22:21,025 --> 00:22:27,105
puedo aplicar este estilo como este mismo estilo.

288
00:22:27,105 --> 00:22:32,240
Voy a aplicar allí. Por lo tanto, simplemente copiaré ese estilo y luego aplicaré ese estilo allí.

289
00:22:32,240 --> 00:22:34,440
Así que, cuando se rellase,

290
00:22:34,440 --> 00:22:40,115
vendrá y será completamente visible donde debería estar.

291
00:22:40,115 --> 00:22:43,735
Entonces, esta es la función de expansión que he definido aquí.

292
00:22:43,735 --> 00:22:45,950
Entonces, ¿dónde quiero hacer uso de esta función?

293
00:22:45,950 --> 00:22:52,060
Vamos a ir primero al componente de menú y dentro del componente de menú,

294
00:22:52,060 --> 00:22:55,530
ahora también importaré eso,

295
00:22:55,530 --> 00:23:04,595
expandir y luego agregarlo en mis animaciones y luego ¿cómo aplico esta expansión?

296
00:23:04,595 --> 00:23:08,160
Entonces, yendo a ese archivo de plantilla de componentes de menú.

297
00:23:08,160 --> 00:23:09,925
En el archivo de plantilla,

298
00:23:09,925 --> 00:23:12,840
Voy a aplicar la expansión a

299
00:23:12,840 --> 00:23:20,435
la lista de cuadrícula donde estoy aplicando esto.

300
00:23:20,435 --> 00:23:24,960
Así que, déjame copiar eso y luego también iremos

301
00:23:24,960 --> 00:23:32,230
al componente de hogar y dentro del componente de hogar también,

302
00:23:32,230 --> 00:23:42,590
Voy a incluir la expansión y luego agregar la expansión a la animación,

303
00:23:43,430 --> 00:23:49,475
y luego ir al archivo de plantilla de componentes domésticos y luego aplicaré

304
00:23:49,475 --> 00:23:57,060
que se expandan a los componentes del plato MD tarjeta,

305
00:23:57,060 --> 00:24:02,695
a los componentes de promoción MD tarjeta y también al líder

306
00:24:02,695 --> 00:24:05,580
componentes MD tarjeta aquí porque todos estos

307
00:24:05,580 --> 00:24:09,880
tres serán recuperados en el futuro desde el servidor y luego renderizados.

308
00:24:09,880 --> 00:24:15,075
Por lo tanto, los datos de los componentes del plato ya se están recuperando del servidor.

309
00:24:15,075 --> 00:24:20,080
Ahora, lo mismo va al componente DishDetail.

310
00:24:20,080 --> 00:24:27,000
Voy a agregar la expansión a las importaciones y luego agregar

311
00:24:27,000 --> 00:24:35,530
una expansión en la animación que va a la vista del componente DishDetail.

312
00:24:35,530 --> 00:24:37,415
Junto con una visibilidad,

313
00:24:37,415 --> 00:24:40,095
también aplicaré la expansión a

314
00:24:40,095 --> 00:24:47,705
la tarjeta div allí y luego a los comentarios div también aquí.

315
00:24:47,705 --> 00:24:50,720
Esto está en el componente DishDetail.

316
00:24:50,720 --> 00:24:54,530
El componente de contacto no tiene nada que se esté recuperando del servidor.

317
00:24:54,530 --> 00:25:00,265
Por lo tanto, voy a ir al componente sobre y en el componente sobre también,

318
00:25:00,265 --> 00:25:08,680
Voy a incluir la expansión y también en las animaciones.

319
00:25:08,680 --> 00:25:12,870
Ir al archivo de plantilla de componentes acerca aquí esta prueba

320
00:25:12,870 --> 00:25:17,190
aquí que muestra que los líderes se están recuperando desde el lado del servidor.

321
00:25:17,190 --> 00:25:20,310
Entonces, voy a aplicar la expansión sobre esto.

322
00:25:20,310 --> 00:25:23,250
Vamos a guardar los cambios y luego ir a echar

323
00:25:23,250 --> 00:25:26,960
un vistazo a nuestra aplicación angular en el navegador.

324
00:25:26,960 --> 00:25:29,235
Ir a nuestra aplicación angular.

325
00:25:29,235 --> 00:25:31,665
Ahora, cuando vas a la plantilla de inicio,

326
00:25:31,665 --> 00:25:34,700
puedes ver que las cartas cuando fueron recuperadas,

327
00:25:34,700 --> 00:25:38,070
se deslizaron en mi punto de vista allí.

328
00:25:38,070 --> 00:25:40,970
Ahora, de manera similar cuando vas al componente about,

329
00:25:40,970 --> 00:25:45,050
ves que una vez que los datos se obtienen del servidor,

330
00:25:45,050 --> 00:25:50,470
entonces la representación de los diversos líderes está siendo

331
00:25:50,470 --> 00:25:56,590
deslizarse cada vez tan lentamente en la posición en esta vista aquí.

332
00:25:56,590 --> 00:25:58,905
Del mismo modo, yendo al componente de menú,

333
00:25:58,905 --> 00:26:01,270
veremos un mismo comportamiento aquí.

334
00:26:01,270 --> 00:26:03,595
Así que, una vez que los datos del menú estén listos,

335
00:26:03,595 --> 00:26:07,065
el componente del menú se desliza en su lugar justo allí.

336
00:26:07,065 --> 00:26:09,980
Lo mismo con los componentes de detalle del plato.

337
00:26:09,980 --> 00:26:12,490
Así que, déjame ir al componente DishDetail y verás que

338
00:26:12,490 --> 00:26:15,250
la vista se desliza en su lugar allí, pero la

339
00:26:15,250 --> 00:26:18,495
otra animación que fue

340
00:26:18,495 --> 00:26:22,625
desapareciendo y reapareciendo esa parte todavía funciona igual que antes.

341
00:26:22,625 --> 00:26:32,755
Por lo tanto, verá que hemos introducido otra animación en nuestra aplicación Angular.

342
00:26:32,755 --> 00:26:38,555
Ahora, si te gusta esto o quieres hacer una forma más elaborada de hacer animaciones,

343
00:26:38,555 --> 00:26:41,605
ciertamente, puedes volverte loco con

344
00:26:41,605 --> 00:26:45,395
haciendo muchos tipos diferentes de cosas con tu animación.

345
00:26:45,395 --> 00:26:52,395
Cambiar muchas propiedades diferentes dentro de los estilos como de qué manera te gusta y así sucesivamente.

346
00:26:52,395 --> 00:26:57,060
Pero sentí que algunas animaciones sutiles aquí y allá

347
00:26:57,060 --> 00:27:02,390
ayudarán a mejorar la interfaz de usuario para mi aplicación angular.

348
00:27:02,390 --> 00:27:08,195
Entonces, he agregado dos animaciones nuevas más a mi aplicación Angular.

349
00:27:08,195 --> 00:27:14,535
Con esto, completamos la segunda parte de nuestro ejercicio de animaciones.

350
00:27:14,535 --> 00:27:18,240
Espero que con estos ejercicios de dos partes,

351
00:27:18,240 --> 00:27:21,280
haya entendido mejor cómo hacer uso de animaciones

352
00:27:21,280 --> 00:27:24,555
dentro de su aplicación Angular.

353
00:27:24,555 --> 00:27:32,040
Este es un buen momento para que hagas un commit de git con el mensaje, animaciones parte dos.