Animación y Vue.js

Hoy hablaré sobre la animación en tu aplicación Vue JS. Cómo puedes usar la animación para mejorar tu aplicación, por qué deberías hacerlo y cuándo tal vez no deberías animar tu aplicación.

Mi nombre es Callum. Soy un desarrollador creativo con sede en Londres. He escrito un libro llamado Vue JS Up & Running publicado por O'Reilly Media. Si estás en Twitter, ese es mi nombre de usuario, siéntete libre de seguirme.

Entonces, pensé que comenzaríamos directamente con el por qué. ¿Por qué querrías agregar animaciones a tu sitio? Además del obvio atractivo visual, como que las animaciones se ven bien. Esa es una razón válida para agregar animaciones. Hay algunas razones funcionales por las que podrías querer agregar animaciones a tu sitio. Las animaciones son una forma muy buena de guiar a los usuarios por tu aplicación. Por ejemplo, podrías tener un llamado a la acción que quieres que vean, o podrías querer que vayan a la siguiente página. Puede que hayan cometido un error en un formulario y quieres alertarles. Las animaciones ayudarían en estos escenarios, al dirigir la atención del usuario hacia esta parte de la página.

Como mencioné antes, las animaciones son una buena manera de guiar la atención o distraer a los usuarios. Otro caso sería si tienes una página que carga bastante lento. Si muestras un signo de carga o algún tipo de animación, el usuario percibirá que la página ha cargado un poco más rápido. Pero por supuesto, demasiada distracción es muy malo. Si agregas demasiadas animaciones a tu sitio, será totalmente inutilizable. Nadie podrá leer tu texto completo. Y esto es especialmente malo para personas con algunas discapacidades, como personas con TDAH o personas con algunos trastornos vestibulares que se verán muy afectadas por demasiada animación. Así que debes tener cuidado con eso.

Entonces, pensé que podríamos hacer que la mayor parte de esta charla sea una gran demostración. No me gustan mucho las diapositivas, aunque parezcan diapositivas. Así que aquí está nuestra primera cosa. Es solo en esta página, es este menú aquí. Estoy seguro de que si has estado en Internet antes, lo cual supongo que sí, especialmente si estás viendo esto en streaming, habrás visto este tipo de menú antes. Haces clic en un botón y el menú aparece desde el costado. Y esto es algo, probablemente una de las animaciones que más he implementado en aplicaciones VGS. Así que veamos el código que alimenta esto.

Aquí te lo explicaré brevemente. Tenemos nuestro estado de menú abierto, que puede ser verdadero o falso. Luego, aquí, este es nuestro menú, que estamos usando la directiva v-show para que cuando la referencia sea verdadera, el menú esté abierto, de lo contrario, no se agregará al DOM.

Y verás que tenemos este componente de transición envuelto alrededor. Entonces, lo que hace esto es que es un componente incorporado en Vue. Esto significa que cuando cambia el estado, cuando el menú abierto cambia de falso a verdadero, no solo se agrega al DOM, sino que se le agregan un montón de clases, que puedes usar para, en este caso, agregar una transición CSS.

Entonces, aquí, lo que podemos ver es que esta clase es, por lo que cuando se agrega este elemento al DOM, se agrega con esta clase enter-from. Entonces tiene una transformación CSS, que lo desplaza hacia la derecha en un 100%, que en este caso sería el ancho del menú. Entonces, efectivamente, cuando se agrega a la pantalla, el menú está justo fuera de la pantalla aquí. Así que, puedes imaginar que está ligeramente fuera de la pantalla. Presionas el botón, entra en la pantalla. Eso es lo que significa esta traducción, traducir x 100%, traducirlo en la dirección x, 100%, que en este caso es el 100% del ancho de esto.

Entonces, lo siguiente que hace Vue una vez que ha agregado esta clase y ha agregado este elemento al DOM, es agregar esta clase llamada interactive, que usamos para agregar una transición, que usamos una transición CSS, y luego elimina esta clase para que la nueva transformación no esté definida, por lo que efectivamente, se traducirá a ninguna parte. Estará en su posición natural en el DOM, que es aquí. Entonces, lo que hace la propiedad de transición CSS es, en este caso, estamos diciendo que haga la transición de la propiedad de transformación, que tome 0.3 segundos para hacerlo y use este easing. Volveré a hablar sobre el easing en un segundo. Pero efectivamente, lo que hace es que puedes darle varias propiedades CSS y significa que cuando cambie, no lo cambies de inmediato, haz la transición desde el valor anterior al nuevo valor en este tiempo. Entonces, en este caso, estamos diciendo que queremos que nuestra transformación CSS, que va desde la traducción hacia la derecha hasta nada, porque se está eliminando la clase, y que tome 0.3 segundos para hacerlo. La explicación es un poco complicada. Pero espero que en el contexto de ver lo que hace el menú, tenga sentido. Esa es la clase enter. Tenemos una clase ligeramente diferente para leave. Así que puedes combinarlas en una dependiendo de lo que quieras hacer. Verás en algunos de mis ejemplos posteriores, tendré enter-active y leave-active en la misma regla. Y luego solo tendré esto, la transformación y 0.3 segundos. En este caso, sin embargo, tenemos algunos easings. Tenemos ease-out en la entrada y ease-in en la salida. Y eso no tendrá sentido si no sabes lo que significa. Así que te lo mostraré. Así que si observas este menú entrar y salir, verás que cuando sale, comienza moviéndose lentamente y luego acelera.

Puedes verlo más o menos. Y luego, en el camino de entrada, hace lo contrario. Comienza moviéndose rápidamente y luego se desacelera hacia el final. ¿Lo ves? Entonces eso es lo que significa ease out y ease in. Ease out significa que estamos utilizando una función de aceleración que no solo se traduce desde esta posición hasta esta posición de manera lineal, y luego se detiene de golpe. Significa que se desacelera. Así que comienza rápido y luego se desacelera. Hay muchas funciones de aceleración diferentes disponibles. MDN tiene una página que las explica todas y algunos gráficos. El sitio web gsat, del que hablaremos más adelante, tiene una serie de gráficos animados que también son muy útiles para comprender las funciones de aceleración.

Genial. Así que eso son las transiciones CSS. Lo siguiente que veremos son las animaciones CSS, que nos permiten hacer cosas un poco más complicadas.

Aquí está nuestra animación CSS. Nuevamente, estamos utilizando nuestro componente de transición. Es bastante similar a cómo funciona el último. En lugar de un botón de menú, tenemos un botón separado en el DOM que estamos utilizando para animarlo en lugar del botón de menú. Pero sigue siendo la misma idea. Tenemos algo que es verdadero o falso y estamos usando Vshow aquí.

La diferencia principal aquí es que estamos utilizando una animación CSS en lugar de una transición. Verás aquí que tenemos la propiedad de animación en lugar de la propiedad de transición, aunque estamos utilizando las mismas clases en su mayoría. Lo que hace esto es una animación CSS, en lugar de simplemente decir que tienes una transición que va de un lugar a otro, te permite configurar keyframes. Entonces estás diciendo lo que quieres que suceda en cada estado de la animación. Estás diciendo que quieres que la animación... Con 0% estás diciendo que la animación comience aquí, al 50% del tiempo que ha transcurrido la animación quieres esto. Y luego el 100% es donde quieres que termine.

Entonces aquí tenemos... Si comenzamos mirando la opacidad, la animación dura 0.7 segundos. Lo que tenemos aquí es que a los 0 segundos, justo después de hacer clic en el botón, la opacidad es 0. Entonces no podrás ver el texto, estará completamente transparente. Y luego, debido a que son 0.7 segundos, al 50% de eso, que es 0.35 segundos, la opacidad se establece en uno. Por lo tanto, está completamente visible a la mitad de la animación, lo cual no podríamos hacer sin la transición CSS, porque solo puedes tener... Efectivamente, solo puedes establecer 0% y 100%. No puedes establecer las partes intermedias.

Además de eso, tenemos una transformación más complicada. Entonces, en la última diapositiva, en la última demostración, teníamos una transformación de traslación. Pero en esta, también estamos agregando escala y rotación, que son otras dos propiedades admitidas por transformación. Entonces, en esta, en el 0%, estamos comenzando con una traslación hacia arriba y hacia la izquierda. Y luego una escala muy pequeña hacia la derecha.

Entonces, escalado significa tomar un objeto como este y hacerlo más pequeño. Y rotar es rotación. Así que lo estamos rotando en tres grados hacia la izquierda. Luego, a mitad de la animación, tenemos una transformación separada, va hacia abajo y hacia la derecha de donde terminará. Se vuelve un poco más grande y se rota en la dirección opuesta. Y luego, al final, lo volvemos a establecer como debería ser normalmente. Entonces, cuando se elimine esta animación, se verá como debería, no habrá saltos. Así es como se ve eso.

Podemos ver que comienza alrededor de aquí, salta hacia abajo aquí y luego vuelve a este punto. Se desvanece en la primera mitad de la animación. A mitad de la animación, es completamente visible. Además de la traducción, la escala y la rotación, también hay una propiedad adicional llamada sesgar, que, si puedes imaginar un rectángulo como ese, sesgarlo ligeramente... Mueve uno de los lados, por lo que es como uno de los lados superiores o inferiores, así, lo hace sesgado. En realidad, nunca lo he usado.

Sí, pensé que ahora que tenemos esto abierto, sería un buen momento para hablar sobre el rendimiento, tal vez no hayas visto esto antes y estés pensando, wow, ahora puedo animar todo. Puedo animar la altura. Puedo animar el color. En teoría, sí, puedes animar la altura. Puedes animar el color. Algunas de las demostraciones más adelante estaré animando el color, pero no son animaciones con rendimiento. Las únicas cosas que puedes animar con rendimiento son las transformaciones y la opacidad. La razón de esto es que son las únicas cosas que no desencadenan un repintado. Entonces, si tomamos el menú que vimos en el último ejemplo, que entra desde la derecha de la pantalla. Podrías pensar que podemos posicionar absolutamente el menú y luego animar la propiedad derecha. Puedes hacer eso, pero no se animará a 60 cuadros por segundo, se verá entrecortado, no se verá genial. Porque cada vez, en cada fotograma, una vez que la propiedad derecha cambia un poco, el navegador tiene que mirar todo lo demás en la página o todo lo cercano para averiguar si eso se ha movido como resultado. Mientras que con la transformación y la opacidad, no tiene que mirar ningún otro elemento. Por lo tanto, estas pueden ser aceleradas por hardware, son mucho más eficientes que cualquier otra cosa. Puedes usar otras cosas. Intenta usar estas cuando puedas, pero a veces querrás animar algunas cosas que estas simplemente no pueden animar. Pero ten en cuenta que podría afectar el rendimiento.

Además, he estado usando principalmente VShow. Pensé que ahora sería un buen momento para hablar sobre Vif versus VShow. Ambos son directivas que muestran y ocultan un elemento. Entonces, si lo cambias a Vif, se vería exactamente igual. La diferencia entre VShow y Vif es que con VShow el texto todavía está en el DOM. Simplemente está oculto con display none. Mientras que con Vif se eliminaría por completo del DOM. Entonces, si algo se está eliminando y agregando varias veces, generalmente quieres usar VShow. Pero si algo solo aparece una vez y luego nunca se verá nuevamente, ahí es donde Vif es beneficioso. Quiero decir, en este contexto, porque no se agrega y elimina con tanta frecuencia, probablemente no importe tanto. Pero si puedes imaginar, digamos que tienes un componente grande con un iframe de YouTube anidado dentro de él. No quieres estar agregando y eliminando eso del DOM repetidamente.

Genial, eso es sobre las animaciones de CSS. A continuación, pasemos a las animaciones de JavaScript. Hasta ahora, todos los ejemplos que hemos visto han sido impulsados por CSS, pero muchas animaciones en la web son impulsadas por JavaScript. Esto puede ser porque queremos animaciones más complicadas. Por ejemplo, podrías querer... Bueno, supongo que este es un ejemplo. En esta animación, puedes ver que cuando entra, el fondo entra primero, luego el texto entra, luego este texto entra, luego el subtítulo entra después, y lo mismo con el diseño. Todos entran en diferentes momentos.

Ahora, podrías hacer esto con una animación de CSS. No sería muy divertido, trabajar en todos los tiempos, y especialmente porque tienen sus propias aceleraciones, podrías hacerlo con una animación de CSS. Simplemente no sería muy divertido hacerlo. Sería un poco complicado. En general, querrías... Quiero decir, este también es un ejemplo simple. Puedes complicarlo mucho más que esto, y entonces definitivamente no querrías usar animaciones de CSS. Aquí es donde las animaciones de JavaScript son útiles.

Si observamos el código de este, puedes ver que hay un poco más de código. Ten paciencia. Para esto, estamos importando una biblioteca llamada GSAP, que significa GreenSock animation platform. Es una biblioteca muy utilizada. Muchos sitios web la utilizan. Yo la uso mucho en mi trabajo. Es una buena biblioteca. Es divertida. Y funciona bien con Vue. También hay otras bibliotecas, como animajs, disponibles. Hay muchas bibliotecas de animación. No es necesario que uses esta. Entonces, aquí todavía estamos usando nuestro componente de transición. Lo hemos usado para los primeros tres ejemplos.

Pero en este caso, estamos escuchando dos eventos. Estamos escuchando el evento Enter y estamos escuchando el evento Leave. Y ambos llaman a diferentes controladores. Entonces, si tomamos el evento Enter, llama a la función handleEnter, que está aquí arriba. Por lo tanto, está pasando dos argumentos. El primero es el elemento. Entonces, es este elemento. Volveré al otro argumento en un minuto.

Y lo que estamos haciendo aquí es configurar una línea de tiempo de Gsap. Una línea de tiempo de GSAP es una forma de encadenar múltiples animaciones juntas. Entonces, en este caso, tenemos nuestro elemento de fondo. Tenemos un elemento separado para el fondo porque se mueve de forma independiente al elemento real. Entonces, notarás que si lo muestro y lo oculto, se sale del elemento real. Por eso tenemos un elemento de fondo separado. Y tenemos nuestro encabezado y nuestro texto. Y todos entran uno tras otro, lo cual es para lo que las líneas de tiempo de GSAP son realmente buenas.

Entonces, esto se sale un poco del alcance de esta charla, así que no entraré en detalles. Pero explicaré brevemente lo que hace esto. Esto está animando. Está tomando este elemento. Lo está animando desde Y igual a 50, opacidad cero. Hacia abajo ligeramente y transparente. Y lo está animando a Y igual a cero. Su posición original, y opacidad uno. Y tarda 0.9 segundos en hacerlo. Puede haber notado en el ejemplo anterior, dije que siempre se debe animar la traducción, no ninguna otra forma de mover un elemento. Y esto tiene esta propiedad Y. GSAP resuelve automáticamente eso a transformaciones. Es una forma agradable de trabajar. En lugar de tener que tener una transformación aquí y calcularla como una cadena, eso no sería muy divertido.

Y luego tenemos esta sintaxis aquí. Así que esto es todo bastante similar. Luego tenemos esto que dice que queremos que esta animación comience 0.2 segundos después de la anterior. Y queremos que esta comience 0.1 segundos después de esta. Y tenemos algo similar en la salida. Pero no lo explicaré en detalle.

El segundo argumento que se le pasa a la función es un argumento de finalización. Así es como Vue sabe que la animación está completa. Pasamos eso directamente a GSAP como el controlador onComplete. Y llama a Vue cuando ha terminado. Y le permite a Vue saber que puede limpiar, puede eliminar sus clases. En el caso de leave, si se usa un v-if, se puede eliminar por completo el elemento. Y lo último que debemos saber aquí es que si solo se utilizan animaciones de JavaScript, pasa CSS igual a falso y no agregará las clases que vimos en las dos diapositivas anteriores, lo que mejora ligeramente el rendimiento.

Lo siguiente que veremos es muy similar a este ejemplo. Notarás que cuando cargué la página, no estaba aquí. Y tuve que presionar el botón para que apareciera. Si esto ya estuviera establecido en verdadero, no se habría animado y simplemente estaría allí. No se habría animado. También tenemos otra propiedad llamada appear. Veamos eso para que podamos agregar appear aquí. Y si estableces esto en verdadero, lo que hará es que cuando naveguemos a la página o volvamos a cargarla, se animará. Así que simplemente actualizo la página para que puedas ver que se anima y es bastante simple. Pero es una buena manera de obtener animaciones cuando cargas la página. A continuación, hasta ahora hemos estado viendo elementos individuales o. Quiero decir, esto no es un elemento individual. Son tres elementos, pero es un hijo del componente de transición. A continuación, veamos las animaciones de lista.

Voy a escribir para mostrarte qué hace este código. Así que lo que sucede aquí es que cuando escribo aquí, se muestra como se divide en letras separadas y se muestra como elementos span. Puedes ver aquí nuestro texto en el que estamos escribiendo desde la entrada. Y luego tenemos una propiedad computada, que lo divide y lo devuelve como un array, que luego estamos iterando. Sí, lo estamos iterando y lo estamos agregando al DOM una letra a la vez.

Entonces, en nuestro transition group. Bueno, puede que no sea obvio al verlo porque solo hay un elemento escrito aquí. Pero se convierte en varios elementos en el DOM, uno por cada letra. Para esto, no podemos usar nuestro antiguo componente de transición. Nos dará un error. No funcionará. Pero en su lugar, tenemos un componente de transition group incorporado en Vue, que es realmente bueno para manejar grupos de elementos. Así que aquí estamos usando animaciones CSS. Volvemos a usar animaciones CSS. Y lo que hace este ejemplo aquí es bastante similar al ejemplo de animación. Puedes ver cuando entra y cuando sale, agregamos una transición. Aquí estamos diciendo que estamos usando la propiedad all, que en lugar de decir transform 0.4 segundos, coma opacidad 0.4 segundos, estamos diciendo que queremos animar todo, queremos transicionar todo lo que cambia. Y aquí puedes ver que lo estamos animando desde y hacia la opacidad 0 y luego lo estamos desplazando hacia abajo 30 píxeles. Así que volvamos a ver el ejemplo. Si elimino uno, se desvanece y se mueve hacia abajo. Y si agrego uno, ocurre lo contrario.

Ahora esto está bien, pero puedes ver que cuando eliminamos una letra, se mueve hacia abajo y luego cuando se elimina del DOM, las otras letras saltan. O en la dirección opuesta, cuando agregamos una, salta. Las otras letras saltan cuando agregamos una nueva al DOM. Afortunadamente, Vue tiene una forma de trabajar con esto, que te mostraré en la próxima demostración. Así que aquí puedes ver que cuando agrego la nueva letra, las otras letras se deslizan hacia la nueva posición en lugar de saltar. Y para hacer eso, es bastante simple. Hablaré sobre el resto en un segundo. Simplemente se agrega una clase move y Vue automáticamente ve que estás haciendo algo con eso. Y maneja