[MUSIC]
Como aprendimos en la conferencia anterior, las animaciones
agregan mucho valor intrínseco a su aplicación.
Se añade a una mejor experiencia de usuario.
Ahora, obviamente, eso no significa que arrojes animaciones por todo el lugar
solo por el bien de hacer animaciones.
Usted pone animaciones en su lugar para mejorar la experiencia del usuario.
En este ejercicio haremos nuestra primera animación
dentro de nuestra aplicación Angular que hemos desarrollado hasta ahora.
Y en el camino,
aprende cómo se pueden implementar animaciones en una aplicación Angular.
Continuaremos este hilo en la segunda parte del ejercicio donde
agregaremos más animación a nuestra aplicación Angular.
Cuando empezamos este curso, en el primer ejercicio con Angular,
ya habíamos añadido en el módulo de animación a nuestra aplicación Angular
en la app.module.ts5, por lo que hemos importado el módulo de animación allí mismo.
Ahora el siguiente paso es ir a los componentes y
luego agregar la animación donde sea necesario.
La primera animación que vamos a añadir está en el componente dishdetail aquí.
Así que yendo al componente dishdetail,
déjame importar algunas clases aquí.
Importaré desencadenador, estado, estilo
, animación y transición desde.
@angular /animaciones.
Ahora, una vez que importamos estos podemos hacer uso de ellos en la construcción de nuestra animación.
Entonces, ¿cómo se agrega animación a un componente?
Vamos a añadir los activadores de animación en el decorador de componentes aquí.
Así que entrar en el decorador de componentes después de las URL de estilos,
y agregar las animaciones como una propiedad dentro de allí.
Y luego aquí, voy a definir un disparador,
que llamo como disparador de visibilidad, y
voy a definir el disparador de visibilidad dentro de aquí.
Ahora para este disparador de visibilidad,
voy a definir dos estados, voy a definir uno
estado como se muestra y voy a definir un segundo estado
como, Oculto.
Así que tengo la flexibilidad de definir mis estados así.
Entonces, para el estado mostrado, ¿qué es lo que quiero aplicar?
Así que para el estado mostrado, aplicaré el estilo de la siguiente manera,
por lo que los estilos que voy a aplicar para
el estado mostrado, voy a transformar, y
la transformación que voy a aplicar es una escala de 1.0.
Así que quiero mostrarlo en
su tamaño normal y
una opacidad de 0.
Así que así es como defino el estilo mostrado.
Entonces, y el estado oculto defino el estilo como,
Transform, diré escala (0.5).
Puedes jugar con estos números
para ver si la animación es lo que deseas.
También jugué con estos números hasta que conseguí algo con lo que estaba
satisfecho.
y 0, o para su estado mostrado más adelante, pondré la opacidad como 1.
Opacidad 1 significa que es completamente visible.
Opacidad 0 significa que está completamente oculto.
Ahora, he definido dos estados aquí, mostrados y aquí en estado.
Ahora, la transición entre estos dos estados,
voy a definir aquí como, cada vez que me muevo de cualquier estado a cualquier estado,
no importa a qué estado me muevo,
la transformación se hace con animación de 0.5 segundos,
o 500 milisegundos.
Y voy a facilitar la salida.
Así que aquí, lo que estoy especificando es que si muevo del estado mostrado al estado oculto o
del estado oculto al estado mostrado, me moveré dentro de 0.5 segundos o 500 milisegundos.
Y luego, voy a hacer la transición relajando dentro y fuera, así que
no será una transición lineal, va a entrar lentamente y
luego entrar y luego facilitar la transición, así que
que no será una transición desigual de uno a otro.
Así que puede usar esta facilidad de entrada o de salida
para especificar cómo desea que ocurra la transición.
Así que ahora para esta animación, he especificado
la visibilidad como el disparador de esta animación.
Ahora para permitir que esta animación funcione correctamente,
iré a mi DishDetailComponent, y luego especificaré,
dentro de este componente, el valor inicial de visibilidad.
Por lo tanto, voy a decir que la visibilidad es
inicialmente configurada como mostrada, y luego,
cada vez que estoy cambiando de un plato a otro.
Y esto sucede cada vez que estoy buscando el plato aquí.
Así que cada vez que estoy cambiando el plato de un plato al otro,
esto es causado cada vez que cambia el parámetro de ruta.
Así que en ese momento, voy a aplicar la animación.
Haré que el disparador pase del estado mostrado al estado oculto y
luego regrese del estado oculto al estado mostrado cuando el plato esté disponible.
Así que para aplicar esa transformación.
Así que voy a adjuntar esta declaración dentro de
un bloque aquí en esta función de flecha.
Y luego también definir esta visibilidad aquí como.
Así que cuando estoy en transición de un estado a otro, así que
a medida que empiezo a buscar la información del plato desde el lado del servidor,
primero ocultaré el plato actual estableciendo el valor de visibilidad
en oculto, lo que significa que el plato actual que
se está mostrando estará oculto de la vista.
Y cuando el nuevo plato esté disponible, volverá a aparecer en la vista.
Así que para hacer eso, cuando mi plato esté disponible en la segunda parte,
en la parte de suscripción, diré como la última declaración en ese bloque,
diré que esta visibilidad es igual a la que se muestra aquí.
Así que mi punto de vista se hace visible en ese punto.
Ahora no estoy aplicando esto al mensaje de error porque voy a
aplicar esta visibilidad solo a aquellas partes de mi plantilla
donde mi plato realmente se está mostrando.
Ahora, si hay un error, entonces solo quiero ocultar el plato correcto.
A continuación, sólo muestra el mensaje de error en la vista allí.
Entonces, con estos cambios en mi DishDetailComponent.
Así que, se puede ver de nuevo, explicando esto en él una vez más.
Cuando comience a buscar el nuevo plato tras el cambio de los parámetros de ruta,
estableceré la visibilidad a oculta para que
ese plato actual que se está mostrando en la vista se oculte.
Y entonces cuando el nuevo plato esté disponible, así que sucederá cuando
se llame a la suscripción cuando ese observable esté disponible.
Y luego, cuando el plato esté disponible y luego,
puse este plato al plato que regresó de lo observable.
En ese punto, restauraré la visibilidad a ese estado mostrado.
Entonces, que mi nuevo plato que he traído se puede mostrar en la pantalla.
Con este cambio, ahora voy al archivo de plantilla,
y dentro del archivo de plantilla voy a aplicar
la visibilidad a ambos el plato aquí.
Así que el primer div donde estoy mostrando el plato Voy a
aplicar el, Activador de visibilidad al plato.
Y luego configuraré eso igual a
Visibilidad, que es la variable que he definido en el código allí.
Ahora, aplico esto al plato aquí, y también aplico lo mismo
al segundo div, donde estoy mostrando los comentarios.
Y eso es todo.
Así que déjame guardar todos los cambios, y luego iremos y
echaremos un vistazo a cómo funciona esta animación en nuestro ejemplo.
Al ir al navegador, ahora les estoy mostrando el menú.
Permítanme seleccionar uno de los platos y luego pasar a la vista de los platos aquí.
Así que cuando se muestra el plato, observe que cada vez que me muevo de
este plato al siguiente plato, por lo que haciendo clic a la derecha.
Entonces ese plato desaparece, y luego cuando el nuevo plato esté disponible,
la vista vuelve a ser visible y luego se muestra el nuevo plato.
Del mismo modo, puedo hacer uno más y luego notar que el nuevo plato,
tan pronto como la información esté disponible, se vuelve visible de nuevo.
Así que esta es la transición que estoy aplicando en este ejemplo aquí.
Así que volviendo, se puede ver el mismo comportamiento repitiéndose de nuevo.
Este pequeño cambio de interfaz de usuario
agrega mucho valor a la forma en que el usuario percibe su aplicación.
Como se da cuenta, esto no agrega mucho a la funcionalidad de su aplicación
en sí, sino que agrega a una mejor experiencia de usuario.
Y ahí es donde aplicamos animaciones juiciosamente dentro de nuestra aplicación
para hacer cierta experiencia de usuario más significativa
para el usuario que está viendo su aplicación Angular, o
viendo su aplicación móvil, que veremos en los cursos posteriores.
Esto completa este ejercicio de animaciones.
Continuaremos las exploraciones de animaciones en esa segunda parte
del ejercicio que surge justo después de esto.
Este es un buen momento para que hagas un comentario de Git con las animaciones del mensaje,
parte uno.
[MÚSICA]