1
00:00:00,000 --> 00:00:04,763
[MUSIC]

2
00:00:04,763 --> 00:00:07,931
Como aprendimos en la conferencia anterior, las animaciones

3
00:00:07,931 --> 00:00:12,927
agregan mucho valor intrínseco a su aplicación.

4
00:00:12,927 --> 00:00:16,080
Se añade a una mejor experiencia de usuario.

5
00:00:16,080 --> 00:00:19,990
Ahora, obviamente, eso no significa que arrojes animaciones por todo el lugar

6
00:00:19,990 --> 00:00:22,730
solo por el bien de hacer animaciones.

7
00:00:22,730 --> 00:00:29,480
Usted pone animaciones en su lugar para mejorar la experiencia del usuario.

8
00:00:30,680 --> 00:00:34,130
En este ejercicio haremos nuestra primera animación

9
00:00:34,130 --> 00:00:37,006
dentro de nuestra aplicación Angular que hemos desarrollado hasta ahora.

10
00:00:37,006 --> 00:00:38,425
Y en el camino,

11
00:00:38,425 --> 00:00:44,190
aprende cómo se pueden implementar animaciones en una aplicación Angular.

12
00:00:44,190 --> 00:00:49,127
Continuaremos este hilo en la segunda parte del ejercicio donde

13
00:00:49,127 --> 00:00:53,206
agregaremos más animación a nuestra aplicación Angular.

14
00:00:53,206 --> 00:00:58,720
Cuando empezamos este curso, en el primer ejercicio con Angular,

15
00:00:58,720 --> 00:01:04,147
ya habíamos añadido en el módulo de animación a nuestra aplicación Angular

16
00:01:04,147 --> 00:01:10,299
en la app.module.ts5, por lo que hemos importado el módulo de animación allí mismo.

17
00:01:10,299 --> 00:01:13,551
Ahora el siguiente paso es ir a los componentes y

18
00:01:13,551 --> 00:01:17,240
luego agregar la animación donde sea necesario.

19
00:01:17,240 --> 00:01:24,336
La primera animación que vamos a añadir está en el componente dishdetail aquí.

20
00:01:24,336 --> 00:01:28,758
Así que yendo al componente dishdetail,

21
00:01:28,758 --> 00:01:32,790
déjame importar algunas clases aquí.

22
00:01:32,790 --> 00:01:38,271
Importaré desencadenador, estado, estilo

23
00:01:38,271 --> 00:01:45,382
, animación y transición desde.

24
00:01:50,250 --> 00:01:53,120
@angular /animaciones.

25
00:01:56,695 --> 00:02:02,460
Ahora, una vez que importamos estos podemos hacer uso de ellos en la construcción de nuestra animación.

26
00:02:02,460 --> 00:02:06,390
Entonces, ¿cómo se agrega animación a un componente?

27
00:02:06,390 --> 00:02:12,360
Vamos a añadir los activadores de animación en el decorador de componentes aquí.

28
00:02:12,360 --> 00:02:19,247
Así que entrar en el decorador de componentes después de las URL de estilos,

29
00:02:19,247 --> 00:02:25,217
y agregar las animaciones como una propiedad dentro de allí.

30
00:02:25,217 --> 00:02:30,140
Y luego aquí, voy a definir un disparador,

31
00:02:30,140 --> 00:02:34,126
que llamo como disparador de visibilidad, y

32
00:02:34,126 --> 00:02:39,888
voy a definir el disparador de visibilidad dentro de aquí.

33
00:02:39,888 --> 00:02:43,942
Ahora para este disparador de visibilidad,

34
00:02:43,942 --> 00:02:48,972
voy a definir dos estados, voy a definir uno

35
00:02:48,972 --> 00:02:54,282
estado como se muestra y voy a definir un segundo estado

36
00:02:54,282 --> 00:03:00,932
como, Oculto.

37
00:03:00,932 --> 00:03:04,930
Así que tengo la flexibilidad de definir mis estados así.

38
00:03:04,930 --> 00:03:09,670
Entonces, para el estado mostrado, ¿qué es lo que quiero aplicar?

39
00:03:09,670 --> 00:03:16,565
Así que para el estado mostrado, aplicaré el estilo de la siguiente manera,

40
00:03:16,565 --> 00:03:21,350
por lo que los estilos que voy a aplicar para

41
00:03:21,350 --> 00:03:26,416
el estado mostrado, voy a transformar, y

42
00:03:26,416 --> 00:03:33,240
la transformación que voy a aplicar es una escala de 1.0.

43
00:03:33,240 --> 00:03:38,170
Así que quiero mostrarlo en

44
00:03:38,170 --> 00:03:42,810
su tamaño normal y

45
00:03:42,810 --> 00:03:47,167
una opacidad de 0.

46
00:03:47,167 --> 00:03:50,929
Así que así es como defino el estilo mostrado.

47
00:03:50,929 --> 00:03:57,884
Entonces, y el estado oculto defino el estilo como,

48
00:04:03,816 --> 00:04:09,659
Transform, diré escala (0.5).

49
00:04:09,659 --> 00:04:13,002
Puedes jugar con estos números

50
00:04:13,002 --> 00:04:17,294
para ver si la animación es lo que deseas.

51
00:04:17,294 --> 00:04:21,194
También jugué con estos números hasta que conseguí algo con lo que estaba

52
00:04:21,194 --> 00:04:22,194
satisfecho.

53
00:04:22,194 --> 00:04:29,457
y 0, o para su estado mostrado más adelante, pondré la opacidad como 1.

54
00:04:29,457 --> 00:04:31,929
Opacidad 1 significa que es completamente visible.

55
00:04:31,929 --> 00:04:34,942
Opacidad 0 significa que está completamente oculto.

56
00:04:34,942 --> 00:04:38,555
Ahora, he definido dos estados aquí, mostrados y aquí en estado.

57
00:04:38,555 --> 00:04:43,481
Ahora, la transición entre estos dos estados,

58
00:04:43,481 --> 00:04:50,931
voy a definir aquí como, cada vez que me muevo de cualquier estado a cualquier estado,

59
00:04:50,931 --> 00:04:56,339
no importa a qué estado me muevo,

60
00:04:56,339 --> 00:05:02,108
la transformación se hace con animación de 0.5 segundos,

61
00:05:02,108 --> 00:05:04,780
o 500 milisegundos.

62
00:05:04,780 --> 00:05:08,522
Y voy a facilitar la salida.

63
00:05:08,522 --> 00:05:13,323
Así que aquí, lo que estoy especificando es que si muevo del estado mostrado al estado oculto o

64
00:05:13,323 --> 00:05:19,140
del estado oculto al estado mostrado, me moveré dentro de 0.5 segundos o 500 milisegundos.

65
00:05:19,140 --> 00:05:23,278
Y luego, voy a hacer la transición relajando dentro y fuera, así que

66
00:05:23,278 --> 00:05:27,755
no será una transición lineal, va a entrar lentamente y

67
00:05:27,755 --> 00:05:31,218
luego entrar y luego facilitar la transición, así que

68
00:05:31,218 --> 00:05:35,383
que no será una transición desigual de uno a otro.

69
00:05:35,383 --> 00:05:40,411
Así que puede usar esta facilidad de entrada o de salida

70
00:05:40,411 --> 00:05:45,125
para especificar cómo desea que ocurra la transición.

71
00:05:45,125 --> 00:05:49,625
Así que ahora para esta animación, he especificado

72
00:05:49,625 --> 00:05:54,861
la visibilidad como el disparador de esta animación.

73
00:05:54,861 --> 00:05:58,911
Ahora para permitir que esta animación funcione correctamente,

74
00:05:58,911 --> 00:06:04,344
iré a mi DishDetailComponent, y luego especificaré,

75
00:06:04,344 --> 00:06:09,412
dentro de este componente, el valor inicial de visibilidad.

76
00:06:09,412 --> 00:06:13,444
Por lo tanto, voy a decir que la visibilidad es

77
00:06:13,444 --> 00:06:18,484
inicialmente configurada como mostrada, y luego,

78
00:06:18,484 --> 00:06:25,379
cada vez que estoy cambiando de un plato a otro.

79
00:06:25,379 --> 00:06:28,649
Y esto sucede cada vez que estoy buscando el plato aquí.

80
00:06:28,649 --> 00:06:32,117
Así que cada vez que estoy cambiando el plato de un plato al otro,

81
00:06:32,117 --> 00:06:35,249
esto es causado cada vez que cambia el parámetro de ruta.

82
00:06:35,249 --> 00:06:37,942
Así que en ese momento, voy a aplicar la animación.

83
00:06:37,942 --> 00:06:42,649
Haré que el disparador pase del estado mostrado al estado oculto y

84
00:06:42,649 --> 00:06:48,520
luego regrese del estado oculto al estado mostrado cuando el plato esté disponible.

85
00:06:48,520 --> 00:06:53,330
Así que para aplicar esa transformación.

86
00:06:53,330 --> 00:06:58,720
Así que voy a adjuntar esta declaración dentro de

87
00:06:58,720 --> 00:07:03,330
un bloque aquí en esta función de flecha.

88
00:07:03,330 --> 00:07:11,806
Y luego también definir esta visibilidad aquí como.

89
00:07:11,806 --> 00:07:16,845
Así que cuando estoy en transición de un estado a otro, así que

90
00:07:16,845 --> 00:07:22,421
a medida que empiezo a buscar la información del plato desde el lado del servidor,

91
00:07:22,421 --> 00:07:27,784
primero ocultaré el plato actual estableciendo el valor de visibilidad

92
00:07:27,784 --> 00:07:32,503
en oculto, lo que significa que el plato actual que

93
00:07:32,503 --> 00:07:37,265
se está mostrando estará oculto de la vista.

94
00:07:37,265 --> 00:07:42,085
Y cuando el nuevo plato esté disponible, volverá a aparecer en la vista.

95
00:07:42,085 --> 00:07:48,147
Así que para hacer eso, cuando mi plato esté disponible en la segunda parte,

96
00:07:48,147 --> 00:07:54,651
en la parte de suscripción, diré como la última declaración en ese bloque,

97
00:07:54,651 --> 00:07:59,299
diré que esta visibilidad es igual a la que se muestra aquí.

98
00:07:59,299 --> 00:08:04,513
Así que mi punto de vista se hace visible en ese punto.

99
00:08:04,513 --> 00:08:09,229
Ahora no estoy aplicando esto al mensaje de error porque voy a

100
00:08:09,229 --> 00:08:13,654
aplicar esta visibilidad solo a aquellas partes de mi plantilla

101
00:08:13,654 --> 00:08:17,616
donde mi plato realmente se está mostrando.

102
00:08:17,616 --> 00:08:20,910
Ahora, si hay un error, entonces solo quiero ocultar el plato correcto.

103
00:08:20,910 --> 00:08:24,751
A continuación, sólo muestra el mensaje de error en la vista allí.

104
00:08:24,751 --> 00:08:29,021
Entonces, con estos cambios en mi DishDetailComponent.

105
00:08:29,021 --> 00:08:34,092
Así que, se puede ver de nuevo, explicando esto en él una vez más.

106
00:08:34,092 --> 00:08:40,072
Cuando comience a buscar el nuevo plato tras el cambio de los parámetros de ruta,

107
00:08:40,072 --> 00:08:42,924
estableceré la visibilidad a oculta para que

108
00:08:42,924 --> 00:08:48,445
ese plato actual que se está mostrando en la vista se oculte.

109
00:08:48,445 --> 00:08:52,427
Y entonces cuando el nuevo plato esté disponible, así que sucederá cuando

110
00:08:52,427 --> 00:08:56,221
se llame a la suscripción cuando ese observable esté disponible.

111
00:08:56,221 --> 00:09:00,001
Y luego, cuando el plato esté disponible y luego,

112
00:09:00,001 --> 00:09:04,455
puse este plato al plato que regresó de lo observable.

113
00:09:04,455 --> 00:09:08,181
En ese punto, restauraré la visibilidad a ese estado mostrado.

114
00:09:08,181 --> 00:09:13,476
Entonces, que mi nuevo plato que he traído se puede mostrar en la pantalla.

115
00:09:13,476 --> 00:09:18,150
Con este cambio, ahora voy al archivo de plantilla,

116
00:09:18,150 --> 00:09:22,710
y dentro del archivo de plantilla voy a aplicar

117
00:09:22,710 --> 00:09:26,366
la visibilidad a ambos el plato aquí.

118
00:09:26,366 --> 00:09:31,160
Así que el primer div donde estoy mostrando el plato Voy a

119
00:09:31,160 --> 00:09:35,948
aplicar el, Activador de visibilidad al plato.

120
00:09:35,948 --> 00:09:39,417
Y luego configuraré eso igual a

121
00:09:42,937 --> 00:09:49,060
Visibilidad, que es la variable que he definido en el código allí.

122
00:09:49,060 --> 00:09:54,450
Ahora, aplico esto al plato aquí, y también aplico lo mismo

123
00:09:54,450 --> 00:09:58,530
al segundo div, donde estoy mostrando los comentarios.

124
00:09:59,700 --> 00:10:00,837
Y eso es todo.

125
00:10:00,837 --> 00:10:05,902
Así que déjame guardar todos los cambios, y luego iremos y

126
00:10:05,902 --> 00:10:11,213
echaremos un vistazo a cómo funciona esta animación en nuestro ejemplo.

127
00:10:11,213 --> 00:10:15,015
Al ir al navegador, ahora les estoy mostrando el menú.

128
00:10:15,015 --> 00:10:19,618
Permítanme seleccionar uno de los platos y luego pasar a la vista de los platos aquí.

129
00:10:19,618 --> 00:10:24,336
Así que cuando se muestra el plato, observe que cada vez que me muevo de

130
00:10:24,336 --> 00:10:28,432
este plato al siguiente plato, por lo que haciendo clic a la derecha.

131
00:10:28,432 --> 00:10:33,349
Entonces ese plato desaparece, y luego cuando el nuevo plato esté disponible,

132
00:10:33,349 --> 00:10:37,900
la vista vuelve a ser visible y luego se muestra el nuevo plato.

133
00:10:37,900 --> 00:10:42,210
Del mismo modo, puedo hacer uno más y luego notar que el nuevo plato,

134
00:10:42,210 --> 00:10:46,070
tan pronto como la información esté disponible, se vuelve visible de nuevo.

135
00:10:46,070 --> 00:10:51,890
Así que esta es la transición que estoy aplicando en este ejemplo aquí.

136
00:10:51,890 --> 00:10:58,860
Así que volviendo, se puede ver el mismo comportamiento repitiéndose de nuevo.

137
00:10:58,860 --> 00:11:02,730
Este pequeño cambio de interfaz de usuario

138
00:11:02,730 --> 00:11:08,310
agrega mucho valor a la forma en que el usuario percibe su aplicación.

139
00:11:08,310 --> 00:11:13,520
Como se da cuenta, esto no agrega mucho a la funcionalidad de su aplicación

140
00:11:13,520 --> 00:11:18,690
en sí, sino que agrega a una mejor experiencia de usuario.

141
00:11:18,690 --> 00:11:23,625
Y ahí es donde aplicamos animaciones juiciosamente dentro de nuestra aplicación

142
00:11:23,625 --> 00:11:28,658
para hacer cierta experiencia de usuario más significativa

143
00:11:28,658 --> 00:11:33,302
para el usuario que está viendo su aplicación Angular, o

144
00:11:33,302 --> 00:11:39,421
viendo su aplicación móvil, que veremos en los cursos posteriores.

145
00:11:39,421 --> 00:11:43,957
Esto completa este ejercicio de animaciones.

146
00:11:43,957 --> 00:11:48,939
Continuaremos las exploraciones de animaciones en esa segunda parte

147
00:11:48,939 --> 00:11:53,082
del ejercicio que surge justo después de esto.

148
00:11:53,082 --> 00:11:57,513
Este es un buen momento para que hagas un comentario de Git con las animaciones del mensaje,

149
00:11:57,513 --> 00:11:58,164
parte uno.

150
00:11:58,164 --> 00:12:03,927
[MÚSICA]