[MÚSICA] [MÚSICA] Hola a todos nuevamente en este nuevo video de componentes avanzados. Ahora vamos a ver un nuevo tema de animaciones que consiste en hacer que cobren vida, se muevan, cambien de color, los componentes de html de nuestra aplicación. Para eso vamos a agregar el módulo en el en el app module de animaciones, sÃ. El módulo de animaciones, el browser animations module y vamos a agregarlo asà mismo en la sección imports de nuestro decorador del NgModule. Bien. De esta manera you tenemos agregado entonces el módulo de animations. Ahora vamos a utilizar como sujeto de pruebas a destino viaje component, sÃ. Y vamos a declarar la animación. Para eso vamos a usar del API de animaciones varios operadores, sÃ. El operador trigger que es el que nos sirve para darle un nombre y agrupar toda la información a la lógica de una animación. Por ejemplo, acercar algo que se ve chiquito de repente se vea grande o viceversa. Hacer que algo cambie de color, etcétera. Esa animación implica al menos siempre dos estados. Un estado prendido que pasa a apagado, un estado activo que pasa a inactivo y viceversa, sÃ. Por eso es que también vamos a usar state. Porque siempre que tengamos una animación, al menos dos estados vamos a tener para que haya justamente una transición de estados. Sino, no hay animación básicamente. Entonces, para esa transición de estados, la vamos hacer animada y vamos a personalizar estilos. Por eso es que vamos a usar estos cinco operadores. Bueno, vamos a crear la animación y eso lo hacemos agregando aquà en el decorador. Vamos, a eliminar los espacios. Bien. De esta manera tenemos arroba component, otra de las directivas que podemos utilizar dentro del arroba component es, mejor dicho dentro de la directiva component otro de los atributos con los que contamos, es el atributo animations que recibe un array de animaciones. Recibe un array de triggers. Es decir, acá podrÃamos poner otro trigger a continuación de este. Aquà nos faltó cerrar este trigger y nos falta cerrar el array. Ahà está. De esta manera you cerramos bien el atributo, bien el animations, ahà está. Bien, entonces aquà tenemos la animación que se va a llamar es favorito. Esto lo estamos haciendo adentro del destino viaje, que podemos elegir uno solo como favorito. Entonces, cuando un objeto es marcado como favorito o no favorito tiene dos estados, el estado favorito propiamente dicho y el estado cuando no es favorito. Lo que le vamos a personalizar en cada caso es, con CCS, el background color, sÃ. Bueno, como tenemos dos estados tiene que haber al menos una transición entre estos dos estados. De no favorito pasa a favorito y queda para siempre en favorito o también le ponemos el estado, la transición de estado, al revés. Que algo pueda dejar de ser favorito. Nosotros necesitamos las dos transiciones de estado porque nosotros marcamos como favorito de a uno por vez. Entonces, si marcamos, tenemos cinco viajes. De cinco destinos de viajes, marcamos uno como favorito, los demás si no habÃa ninguno elegido permanecen todos como no favoritos, pero si de repente yo cambio y digo que mi favorito es otro, el que estaba como favorito antes pasa a estar como no favorito. Entonces, la transición de estado sigue estando igual. Bien, fÃjense que en la transición de estado, lo que cambiamos de estilo simplemente es, mejor dicho, no cambiamos los estilos sino que lo que hacemos es hacer que el cambio de estilo se aplique con un delay. Que se vaya haciendo gradualmente. Que tarde tres segundos para pasar de no favorito a favorito y un segundo para pasar de favorito a no favorito. Bien, de esta manera lo único que nos falta hacer es tocar el html. El html, lo que vamos a hacer es reemplazar el atributo contenedor de todo el destino viaje, que se ve en la pantalla principal de nuestra wish list y le agregamos la directiva arroba es favorito entre corchetes. Cuando uno agrega esto de esta manera este, es favorito, tiene que coincidir, perdón, con un nombre de un trigger. Entonces, estamos diciendo, bueno a ver, del trigger arroba es favorito hay que asignarle un valor. El valor que le vamos a asignar es el estado. O sea, vamos a estar en estado favorito o no favorito. Entonces para asignarle en qué estado está de esa animación, adentro podemos llamar una función de Typescript o podemos poner, como en este caso es cortito, podemos poner directamente el código Typescript aquà adentro, sÃ, porque esto es directiva. Es evaluado por Angular. Entonces, la lógica que hacemos es destino he seleccionado luego, el estado es, estado favorito. Este nombre de estado tiene que coincidir con uno de los estados de [INCOMPRENSIBLE]. Y sino, ese estado no favorito que tiene que coincidir con alguno de los otros estados. De esta manera, a medida que vaya cambiando la condición de seleccionado o no, lo que va a pasar es que se le va a asignar al arroba favorito, un estado u otro. Entonces, va a automática a transicionar de uno a otro. Vamos a ver la demo. Vamos a agregar otro destino. Ahà you ven como se pintó. Recuerdan que cuando abrÃamos uno es marcado por defecto como preferido. Eso lo habÃamos hecho con la lógica de Redux. Bien, entonces ven como una de las transiciones ocurre más rápida que la otra. De no favorito a favorito tarda más, tarda tres segundos y de favorito a no favorito tarda un segundo. Es decir, cuando yo elija este, este va a estar blanco en un segundo. En verdad el color va a ser white smoke, un blanco humo. Y va a pasar este otro que lo vamos a poner como preferido a turquesa y eso va a tardar, esa transición va a tardar tres segundos. Ven que este you pasó, y este ahà terminó recién de pasar. Bueno, con esto finalizamos el video de introducción a animaciones. Este API de animaciones es muy grande, se pueden hacer muchas cosas. Asà que, esto es una simple introducción y los invitamos a investigar más y a leer las lecturas asociadas al video. Nos vemos en el próximo video. [MÚSICA] [MÚSICA]
