Continuando con nuestro ejercicio de animación de la primera parte anterior.
Añadimos más animaciones a nuestra aplicación angular.
En particular, añadiremos una animación que se activará
cuando los cambios de ruta se produzcan dentro de nuestra aplicación de una sola página.
También agregaremos una animación que permite
una vista que se muestre cuando los datos se obtienen desde el lado del servidor,
por lo que cuando usted está descartando el spinner en su vista y luego renderizando la vista,
queremos que la vista se proyecte en la pantalla
en lugar de simplemente aparecer todos los de repente.
Así que, un par de nuevas animaciones que vamos a añadir en este ejercicio.
En el camino cuando tiene múltiples animaciones en su aplicación,
puede ser mejor refactorizar el código de una manera que sea más
manejable en lugar de incluir
fragmentario cada poco de un disparador en cada uno de los archivos
dentro de nuestros componentes de nuestra aplicación angular.
Por lo tanto, hagamos todos estos pasos como parte dos del ejercicio de animación.
Lo primero que voy a hacer es refactorizar
el código que ya hemos hecho como parte uno de este ejercicio de animaciones.
Este enfoque que les estoy ilustrando aquí es solo mi enfoque sugerido.
No necesariamente tienes que seguir exactamente de esta manera,
, pero siento que esto ayuda a organizar el código mucho mejor.
Entonces, lo que voy a hacer es como si tuviéramos una carpeta separada para servicios,
teníamos una carpeta separada para los recursos compartidos y así sucesivamente,
Voy a crear una nueva carpeta llamada animaciones.
Almacenaremos todo el código relacionado con la animación allí y luego haremos uso de él importándolo
donde sea necesario dentro de nuestros componentes en nuestra aplicación angular.
Entonces, yendo a nuestro código,
dentro de la carpeta de la aplicación, voy a crear una nueva carpeta y nombrarla Animaciones.
Dentro de esta carpeta Animations,
voy a crear un nuevo archivo y por falta de una palabra mejor
lo llamaré archivo app.animation.ts.
Luego, dentro de esto, voy a importar
las diversas clases de animaciones angulares que hice en el componente DishDetail.
Así que, yendo al componente DishDetail,
recordará que lo primero que hice
fue agregar esta línea al componente DishDetail.
Voy a cortarlo del componente DishDetail y
en lugar de pegarlo en las animaciones de la aplicación,
para que dondequiera que se incluyan estas animaciones de la aplicación
importándolas a nuestros otros componentes,
esto vendrá automáticamente por la derecha allí.
Ahora, dentro de esta aplicación animaciones,
voy a crear algunas funciones de fábrica que exportarán los diversos disparadores.
La primera función de fábrica que voy a crear
esta función de exportación y llamarla visibilidad.
Esta función de visibilidad devolverá el código
correspondiente al disparador que hemos hecho en el componente DishDetail.
Entonces, volviendo al componente DishDetail,
solo voy a cortar todo este código para el disparador desde aquí y luego volver al archivo
app animation.ts y luego pegarlo en
lugar justo allí en la función aquí.
Esto ahora se convierte en una función que está disponible para importar desde mi componente DishDetail.
Entonces, volviendo al componente dishDetail.
Ahora, en el lugar donde importé el disparador y otras clases,
voy a importar ahora la visibilidad
de la aplicación de animación, animación,
y por lo que esa función ahora estará disponible para mí dentro de mi código aquí.
Entonces, una vez que lo hago dentro de mis animaciones,
simplemente puedo llamar a esa función para poder decir
visibilidad y luego el código de activación ahora se convierte en parte de mi componente aquí.
Ahora, esto encuentro que es una mejor manera de organizar el código para mis animaciones.
Ahora, si necesito usar el mismo disparador en otro componente,
simplemente puedo seguir este enfoque para incluirlo en mis otros componentes también.
Vamos a guardar los cambios y luego ir y tomar
un vistazo rápido a nuestra aplicación en el navegador.
Vaya al navegador, verá que cuando vaya al componente de disco,
el componente de disco está allí y luego
tendrá el mismo comportamiento de animación que antes.
Entonces, al refactorizar el código,
he logrado que el código esté mejor organizado y
todavía funciona exactamente igual que la primera parte de este ejercicio.
Si solo tenía una sola animación utilizada en un solo lugar,
entonces el enfoque anterior funciona bien, pero si tiene
múltiple y especialmente si está reutilizando el código en muchos componentes,
entonces este enfoque refactorizado es una forma mucho mejor de implementar la solución.
La próxima actualización que voy a hacer es agregar animaciones en los cambios de ruta.
Entonces, cuando voy de una vista a otra vista, así, por ejemplo,
de la casa a la acerca o a punto de menú o menú para contactar o viceversa,
entonces quiero ser capaz de animar estos cambios dentro de mi aplicación.
Entonces, para hacer eso,
introduciré otra función en el archivo animation.ts de la aplicación.
Entonces, entrando en el archivo animation.ts de la aplicación,
exportaré otra función que llamo como FlyInOut,
verá por qué uso este nombre aquí.
Entonces esto devolvería una función que es un disparador con el nombre FlyInOut.
Entonces, dentro estaba trigger,
voy a definir el código para lo que este disparador va a hacer.
Así que, aquí, voy a definir un estado aquí con el nombre estrella,
por lo que no importa qué estado es,
esto es aplicable a cualquier estado y luego voy a definir
algunos estilos aquí y los dos estilos que
definiré es opacidad es uno
y transformar es TransLatex (0),
de modo que significa que está en su posición normal en este caso.
Ahora, cuando defino transiciones,
también puedo definir transiciones de esta manera.
Entonces, si digo entrar en transición,
la transición entrar es una abreviatura para decir ir de
estado vacío a uno de los estados existentes.
Entonces, lo que significa que la vista está entrando en mi aplicación.
Así que entra, lo que significa que ahora cuando camino a
una vista particular en mi aplicación de una sola página,
esa vista entrará en la vista.
Entonces, es por eso que puedo aplicar la transición de dos puntos en ese caso.
Ahora de manera similar, hay otra transición llamada colon
leave que puedo aplicar cuando se pasa de
esta vista y luego se está tomando la vista desde la salida del enrutador de su aplicación.
Así que vamos a hacer tanto entrar como el otro que es salir.
Entonces, dos funciones que voy a definir aquí,
transición entrar y transición salir aquí.
Entonces, para el enter,
¿qué quiero definir?
Para entrar, déjame definir la función aquí,
y de manera similar, para salir también,
voy a definir las funciones aquí.
Así que, creando este andamio aquí.
Ahora, puedo introducir la información que quiero dentro de estas transiciones.
Entonces, cuando se produzca esta transición,
comenzaré con un estilo de transformación,
TransLatex menos 100 por ciento,
lo que significa que la vista está completamente fuera de la vista aquí.
Así que empiezas desde menos 100 por ciento en este momento.
Así que, cuando estés entrando,
comenzarás con eso,
y luego también en este punto,
animaré, y animaré en 500.
Entonces, cuando especifico 500 como este,
incluso puedes hacerlo de esta manera.
Alternativamente, puedes decir, entre comillas,
«500ms», y luego incluso puedes usar facilidad de acceso o facilidad de salida.
Entonces, permítanme modificar esto en
500ms fácil de entrar porque esta vista está llegando.
Por lo tanto, vamos a facilitar la vista.
Así que, para el permiso, voy a aplicar la transición como animado,
y luego diría 500 milisegundos, de nuevo, fácil de salir.
Entonces, este punto de vista se va.
Por lo tanto, queremos facilitar esa vista.
Entonces, en este caso,
el estilo que aplico
es transformar,
TransLatex 100 por ciento.
Por lo tanto, esta vista desaparecerá por completo de la pantalla allí.
TransLatex 100 por ciento.
Además, estableceré la opacidad en cero.
Por lo tanto, desaparece por completo de la pantalla.
Por lo tanto, esta animación agregará una buena nueva característica aquí.
Ahora, para este también,
puedo agregar, comenzando con una opacidad de cero, si lo prefiere.
Vamos a añadir eso y ver cómo se ve.
Entonces, este es el disparador FlyInOut que he definido aquí.
Ahora, obviamente se está preguntando,
¿cómo uso este FlyInOut y luego aplico
esto para enrutar transiciones en mi aplicación?
Entonces, para hacer eso, vamos a, primero,
comenzando con el archivo component.ts de menú.
Voy a importar
el FlyInOut
de la animación de la aplicación.
Luego, yendo al componente,
ahora voy a introducir una nueva propiedad llamada como anfitrión.
Te diré lo que entra en el anfitrión en poco tiempo.
Entonces, también incluiremos la propiedad de animaciones,
que es una matriz aquí.
Entonces, dentro de aquí, usaré el FlyInOut que acabamos de importar.
Por lo tanto, este disparador de animación se aplicará para este componente multimedia.
Ahora, dentro del host,
así que así es como me aseguro de que esta animación en particular ocurra cuando se producen cambios de ruta.
Así que, dentro de este anfitrión aquí,
suministro esto como diciendo,
@flyInOut y decir verdad,
y esto debería estar entre comillas también,
@flyInOut, true, y luego style,
display block.
Por lo tanto, estos dos deben aplicarse dentro de la propiedad de host aquí.
Ahora, cuando hagamos esto, mi componente de menú comenzará ahora a animar
cuando me dirijo al componente de menú,
y luego también cuando salga del componente de menú.
Ahora, aplicaré lo mismo a los componentes restantes de mi aplicación Angular.
Entonces, lo que haré es,
simplemente copiaré esto,
y luego aplicaremos esto al componente sobre.
Entonces, iré al componente sobre.
Dentro del decorador de componentes,
he incluido la información aquí,
y ves la línea roja que me recuerda que necesito importar
FlyInOut de animaciones, animación de aplicaciones.
Entonces, el mismo enfoque, sobre el componente,
luego dentro del componente de contacto también, lo mismo,
y luego aplicar las propiedades de host y animación al decorador del componente,
y luego ¿qué más tenemos?
El componente de casa. Vayamos al componente de inicio y repitamos lo mismo aquí.
Voy a añadir en el host y la propiedad de animaciones,
y luego seguir adelante e importar
FlyInOut, desde la animación de la aplicación.
¿Nos perdimos alguna? Oh, también tenemos que actualizar el componente de detalle del plato.
Entonces, déjame ir al componente de detalle del plato.
Puesto que ya tenemos la visibilidad allí,
solo voy a importar el FlyInOut.
Entonces, ya que ya hemos configurado las partes restantes aquí,
voy a entrar y pegar ese código,
y obviamente, tengo dos animaciones aquí.
Permítanme cortar la visibilidad desde aquí y luego agregarlo
a la otra animación,
y luego cortar esto para que tenga una sola propiedad de animación con
tanto FlyInOut como funciones de visibilidad incluidas y llamadas allí,
y luego la propiedad del host.
Ahora, vamos a guardar los cambios y luego echar un vistazo a
la nueva animación que acabamos de aplicar a nuestros componentes.
Comenzando con la vista de casa.
Por lo tanto, tenemos la vista de casa siendo renderizada aquí.
Permítanme ahora ir rápidamente a la vista Acerca de,
y luego verá que la vista Acerca de sólo se desliza mientras
la vista Inicio se desliza hacia fuera en la pantalla aquí.
Del mismo modo, cuando vaya al menú,
verá que la vista Menú se desliza mientras que la vista Acerca se desliza hacia fuera.
Es tan rápido que no te das cuenta como tal.
Del mismo modo, para la vista Contacto,
verá la vista de contacto deslizándose en.
Entonces, este tipo de animación se puede agregar usando
este enfoque que acabamos de ilustrar para su aplicación Angular.
Aún no hemos terminado. Haremos una animación más dentro de nuestra aplicación.
Para ilustrar lo que me gustaría hacer en la próxima animación,
vamos a echar un vistazo rápido en el componente de menú.
Entonces, ves que cuando el componente de menú,
cuando el spinner está girando y luego es reemplazado por la vista,
la vista aparece de repente en la pantalla,
y es un poco irritante para el ojo.
Puede que no lo note.
Puede que estés muy contento con eso.
Pero podemos agregar en una forma de facilitar en
esa vista cuando los datos se obtienen del servidor y la vista se está procesando en.
Entonces, cuando la variable del plato en mi archivo component.ts de menú no se anule,
entonces el spinner estará oculto y luego la vista del plato,
el menú se construye y luego se presenta.
Por lo tanto, queremos que se facilite en la pantalla.
Por lo tanto, vamos a añadir una animación más para hacer que ambos en el componente de menú.
También aplicaremos lo mismo en el componente de detalle del plato.
También usaremos lo mismo en el componente Home también y en el componente About,
, donde vamos a buscar los datos para mostrar la lista de líderes.
Así que, dondequiera que esté buscando datos del servidor y luego diseñando la vista,
cuando aparezca la vista,
queremos facilitar la vista usando esta nueva animación que voy a crear a continuación.
Al ir al archivo animation.ts de la aplicación,
voy a agregar en otra función aquí,
y déjame llamarlo ampliar.
Esta función expandirá la vista que se está preparando
después de que los datos se obtienen desde el lado del servidor.
Así que, este punto de vista, de nuevo,
Voy a devolver un disparador aquí.
Voy a nombrar el desencadenador como expand,
y este desencadenador creará.
¿Cómo definimos este disparador?
Así que, dentro de este gatillo vamos a incluir un estado con estrella allí.
Por lo tanto, no importa qué estado es.
Todos los estados se representarán con el estilo como
opacidad una transformación traducir x 0.
Por lo tanto, se muestra a la derecha y el centro en mi aplicación.
Eso debería ser un corsé allí.
Lo estaba mirando y dijo,
¿Por qué está mostrando una línea roja?
Por lo tanto, cuando escribes muy rápido, a menudo cometes errores allí.
Así que, en lugar de un corchete cuadrado,
debería ser un corchete allí.
Entonces, ese es el estado.
Entonces, cualquier estado que sea completamente visible y centrado donde debería estar centrado.
Ahora, permítanme desencadenar una transición.
Ahora, esta transición se activará sólo
al entrar cuando la vista se presenta en la pantalla.
La parte de salida que ya estamos haciendo en la animación de ruta, así que no necesitamos eso.
Sólo necesitamos la parte inter para esta vista porque
la vista se representa en esta pantalla allí.
Así que, en el enter,
voy a definir la transición apropiadamente.
Entonces, en la transición, ¿qué quiero hacer?
Quiero aplicar el mismo enfoque que he usado con la transición enter aquí.
Entonces, solo voy a copiar esto y luego hacer algunos ajustes menores al código allí.
Entonces, para la transición de entrar aquí también,
quiero aplicar lo mismo.
Diré traducir Insta del 100 por ciento.
Voy a usar el 50 por ciento y luego voy a hacer la traducción Y.
Así que, lo que significa que esta vista caerá desde el top 50 precent comenzando con
opacidad cero y luego lo aliviaré en un tiempo un poco más rápido,
200 milisegundos y lo facilitará en nuestra aplicación.
Ahora, por lo tanto, verá el ajuste menor al código aquí.
Por lo tanto, traducir menos 50 por ciento y opacidad cero y
se suaviza en 200 milisegundos y luego en ese punto,
puedo aplicar este estilo como este mismo estilo.
Voy a aplicar allí. Por lo tanto, simplemente copiaré ese estilo y luego aplicaré ese estilo allí.
Así que, cuando se rellase,
vendrá y será completamente visible donde debería estar.
Entonces, esta es la función de expansión que he definido aquí.
Entonces, ¿dónde quiero hacer uso de esta función?
Vamos a ir primero al componente de menú y dentro del componente de menú,
ahora también importaré eso,
expandir y luego agregarlo en mis animaciones y luego ¿cómo aplico esta expansión?
Entonces, yendo a ese archivo de plantilla de componentes de menú.
En el archivo de plantilla,
Voy a aplicar la expansión a
la lista de cuadrícula donde estoy aplicando esto.
Así que, déjame copiar eso y luego también iremos
al componente de hogar y dentro del componente de hogar también,
Voy a incluir la expansión y luego agregar la expansión a la animación,
y luego ir al archivo de plantilla de componentes domésticos y luego aplicaré
que se expandan a los componentes del plato MD tarjeta,
a los componentes de promoción MD tarjeta y también al líder
componentes MD tarjeta aquí porque todos estos
tres serán recuperados en el futuro desde el servidor y luego renderizados.
Por lo tanto, los datos de los componentes del plato ya se están recuperando del servidor.
Ahora, lo mismo va al componente DishDetail.
Voy a agregar la expansión a las importaciones y luego agregar
una expansión en la animación que va a la vista del componente DishDetail.
Junto con una visibilidad,
también aplicaré la expansión a
la tarjeta div allí y luego a los comentarios div también aquí.
Esto está en el componente DishDetail.
El componente de contacto no tiene nada que se esté recuperando del servidor.
Por lo tanto, voy a ir al componente sobre y en el componente sobre también,
Voy a incluir la expansión y también en las animaciones.
Ir al archivo de plantilla de componentes acerca aquí esta prueba
aquí que muestra que los líderes se están recuperando desde el lado del servidor.
Entonces, voy a aplicar la expansión sobre esto.
Vamos a guardar los cambios y luego ir a echar
un vistazo a nuestra aplicación angular en el navegador.
Ir a nuestra aplicación angular.
Ahora, cuando vas a la plantilla de inicio,
puedes ver que las cartas cuando fueron recuperadas,
se deslizaron en mi punto de vista allí.
Ahora, de manera similar cuando vas al componente about,
ves que una vez que los datos se obtienen del servidor,
entonces la representación de los diversos líderes está siendo
deslizarse cada vez tan lentamente en la posición en esta vista aquí.
Del mismo modo, yendo al componente de menú,
veremos un mismo comportamiento aquí.
Así que, una vez que los datos del menú estén listos,
el componente del menú se desliza en su lugar justo allí.
Lo mismo con los componentes de detalle del plato.
Así que, déjame ir al componente DishDetail y verás que
la vista se desliza en su lugar allí, pero la
otra animación que fue
desapareciendo y reapareciendo esa parte todavía funciona igual que antes.
Por lo tanto, verá que hemos introducido otra animación en nuestra aplicación Angular.
Ahora, si te gusta esto o quieres hacer una forma más elaborada de hacer animaciones,
ciertamente, puedes volverte loco con
haciendo muchos tipos diferentes de cosas con tu animación.
Cambiar muchas propiedades diferentes dentro de los estilos como de qué manera te gusta y así sucesivamente.
Pero sentí que algunas animaciones sutiles aquí y allá
ayudarán a mejorar la interfaz de usuario para mi aplicación angular.
Entonces, he agregado dos animaciones nuevas más a mi aplicación Angular.
Con esto, completamos la segunda parte de nuestro ejercicio de animaciones.
Espero que con estos ejercicios de dos partes,
haya entendido mejor cómo hacer uso de animaciones
dentro de su aplicación Angular.
Este es un buen momento para que hagas un commit de git con el mensaje, animaciones parte dos.