Hay mucho que ganar al agregar animaciones a tu sitio o aplicación. Más allá de su atractivo visual, puedes guiar la atención del usuario, cubrir componentes y elementos lentos de carga, y revelar secciones de una página sin que el usuario se pregunte de dónde provienen. Esta charla cubrirá las formas incorporadas en Vue.js que te ayudan a animar tu sitio, y cómo, para animaciones más complicadas, puedes utilizar bibliotecas de terceros. También se abordarán los conceptos básicos de la animación en sí: qué animar y qué no animar, y cómo puedes utilizar las animaciones para mejorar tu sitio web sin perjudicar la experiencia de las personas con discapacidades.
This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.
FAQ
Las animaciones en Vue JS mejoran la estética visual del sitio y guían la atención del usuario hacia elementos importantes, como llamados a la acción o errores en formularios. También pueden mejorar la percepción de la velocidad de carga de las páginas.
No es recomendable usar demasiadas animaciones en una aplicación, ya que puede hacerla inutilizable y distractora, además de afectar negativamente a usuarios con discapacidades como TDAH o trastornos vestibulares.
El componente de transición en Vue JS es un componente incorporado que permite agregar y manejar efectos de entrada y salida para elementos del DOM, utilizando clases CSS para definir estas transiciones.
VShow mantiene el elemento en el DOM y simplemente lo oculta, mientras que VIf elimina el elemento completamente del DOM. VShow es útil para elementos que se muestran y ocultan frecuentemente, mientras que VIf es mejor para elementos que solo se muestran una vez.
Las propiedades más eficientes para animar sin afectar el rendimiento son las transformaciones y la opacidad, ya que no desencadenan repintados del navegador y pueden ser aceleradas por hardware.
Para animaciones más complejas, se pueden usar bibliotecas de JavaScript como GSAP, que permiten configurar animaciones detalladas y controlar múltiples propiedades y elementos de una manera optimizada y sincronizada.
La charla de hoy cubre la animación en aplicaciones de Vue JS, incluyendo animaciones CSS, animaciones JavaScript utilizando la biblioteca GSAP, y manejo de múltiples elementos con grupos de transición. También se discuten diferentes tipos de movimientos, transiciones de estado y animación de números y SVGs. En general, proporciona una visión general completa de las técnicas y herramientas de animación para mejorar las aplicaciones de Vue JS.
1. Introducción a la animación en aplicaciones Vue JS
Short description:
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. Las animaciones son una buena manera de guiar la atención o distraer a los usuarios. Si agregas demasiadas animaciones a tu sitio, será totalmente inutilizable. Nadie podrá leer tu texto completo.
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.
2. Animación en aplicaciones Vue JS
Short description:
Tenemos nuestro estado de menú abierto, que puede ser verdadero o falso. Este es nuestro menú, que estamos usando la directiva v-show. El componente de transición agrega clases al elemento de menú para las transiciones CSS. El menú está inicialmente fuera de la pantalla y se desplaza desde la derecha cuando se agrega al DOM. La propiedad de transición CSS se utiliza para animar la propiedad de transformación, con una duración de 0.3 segundos y utilizando un easing. La clase de salida tiene una animación diferente. El menú se mueve lentamente y luego acelera cuando sale.
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.
3. Comprensión de las funciones de aceleración en la animación
Short description:
Puedes ver que al usar ease out y ease in, la animación comienza moviéndose rápidamente y luego se desacelera hacia el final. Este efecto se logra utilizando diferentes funciones de aceleración, que se pueden encontrar en MDN y en el sitio web gsat. Estos recursos proporcionan explicaciones y gráficos para ayudarte a comprender las funciones de aceleración.
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.
4. Animaciones CSS y Keyframes
Short description:
Aquí está nuestra animación CSS. Estamos utilizando una animación CSS en lugar de una transición. La propiedad de animación te permite configurar keyframes para definir los estados de la animación. Por ejemplo, al 0% la opacidad se establece en 0, haciendo que el texto sea transparente. Al 50%, la opacidad se establece en 1, haciendo que el texto sea completamente visible. También tenemos una transformación más complicada, que incluye traslación, escala y rotació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.
5. Animando Objetos y Rendimiento
Short description:
Entonces, escalado significa hacer que un objeto sea más pequeño, y rotar es rotación. Lo estamos rotando hacia la izquierda en tres grados. Luego, a mitad de la animación, se transforma para ir hacia abajo y hacia la derecha, un poco más grande y rotado en la dirección opuesta. Sesgar es una propiedad que mueve un lado de un rectángulo, haciéndolo sesgado. Al animar, solo las transformaciones y la opacidad pueden ser animadas con rendimiento, ya que no desencadenan un repintado. Otras propiedades como la altura y el color se pueden animar pero pueden no tener un buen rendimiento. Las transformaciones y la opacidad están aceleradas por hardware y son más eficientes. Sin embargo, ten cuidado, ya que animar otras propiedades puede afectar el rendimiento.
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.
6. VShow versus Vif
Short description:
VShow y Vif son directivas que muestran y ocultan elementos. VShow oculta el elemento con display none, mientras que Vif lo elimina por completo del DOM. Usa VShow cuando un elemento se está eliminando y agregando múltiples veces, y Vif cuando un elemento solo aparece una vez y no se verá nuevamente.
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.
7. JavaScript Animations and GSAP Library
Short description:
A continuación, pasemos a las animaciones de JavaScript. Las animaciones de JavaScript son útiles cuando deseas animaciones más complicadas o cuando las animaciones de CSS se vuelven demasiado complicadas. GSAP (GreenSock animation platform) es una biblioteca ampliamente utilizada para animaciones de JavaScript y funciona bien con Vue. También hay otras bibliotecas de animación disponibles.
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.
8. Listening to Events and Chaining Animations
Short description:
En este caso, estamos escuchando dos eventos: Enter y Leave. Cada evento llama a una función de controlador diferente. Configuramos una línea de tiempo de GSAP para encadenar múltiples animaciones juntas. El elemento de fondo se mueve de forma independiente al elemento real, y los elementos de encabezado y texto entran uno tras otro. La animación lleva al elemento desde Y igual a 50 y opacidad cero a Y igual a cero y opacidad uno, utilizando la resolución automática de la propiedad Y de GSAP a transformaciones.
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.
9. Animation Syntax and List Animations
Short description:
Y luego tenemos esta sintaxis aquí. 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. 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. En el caso de leave, si se usa un v-if, se puede eliminar por completo el elemento. 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. Si esto ya estuviera establecido en verdadero, no se habría animado y simplemente estaría allí. También tenemos otra propiedad llamada appear. Veamos eso para que podamos agregar appear aquí. Se animará cuando naveguemos a la página o volvamos a cargar la página. A continuación, veamos las animaciones de lista.
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.
10. Manejo de varios elementos con Transition Group
Short description:
Al escribir en el campo de entrada, el texto se muestra como letras separadas utilizando elementos span. La propiedad computada divide el texto en un array de letras, que luego se iteran y se agregan al DOM una letra a la vez. Para manejar varios elementos en el DOM, se utiliza un componente de transition group. Las animaciones CSS se aplican utilizando la propiedad all para transicionar todo lo que cambia. Al agregar o eliminar letras, las otras letras se deslizan a la nueva posición en lugar de saltar, gracias al manejo automático de Vue de la clase move.
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
11. Diferentes tipos de movimientos y transiciones de estado
Short description:
También tuve que agregar esto. Tenía errores sin ello. Hay otros tipos de movimientos. Por ejemplo, esto es un generador de anagramas. Cuando presiono enter, mezcla las letras. La complicación está en las claves. La mayor parte del código se encarga de esto. La última animación que veremos son las transiciones de estado.
la posición o el cambio automáticamente. También tuve que agregar esto. No sé por qué. Tenía errores sin ello. No pude encontrarlo en la documentación. Tal vez sea un error. No lo sé. Así que sí, esto se está moviendo. Pero hay otros tipos de movimientos. Por ejemplo, vamos a ver, esto es una especie de generador de anagramas, supongo. Entonces, si presiono enter, mezcla todas las letras en una posición diferente. Y debido a que estamos usando la clase move, Vue automáticamente lo mueve por nosotros. Es realmente bueno. Sí. Entonces, una cosa a tener en cuenta, es posible que hayas notado que hay bastante código cuando lo mostré antes. Y esto se debe a que son dos estados. Tengo este texto en el orden correcto y lo tengo en el orden incorrecto. Entonces, la complicación aquí está en las claves. Si simplemente usara el orden aquí, si usara 0, 1, 2, 3, 4 como las claves, entonces esto no se animaría porque no podrías saber que he mezclado. Solo pensaría que he cambiado qué letra hay en ellos. Así que la mayor parte del código aquí se encarga de eso. El texto dividido agrega el índice y luego tenemos un nuevo texto mezclado que establece el texto mezclado en un orden diferente. Entonces, el `I` todavía está vinculado a nuestros caracteres originales. Entonces, esto sería 0, esto sería 1, lo que sea, no sé cómo usar un ratón. Uno de estos sería 2, uno de estos sería 3, no sé en qué orden. 4, 5. Y así es como Vue puede saber que lo hemos reordenado, en lugar de simplemente reemplazarlos con nuevas letras en un orden diferente. Entonces, el último tipo de animación que vamos a ver son las transiciones de estado. Entonces, aquí, esto no es realmente específico de Vue, pero funciona bien con Vue.
12. Animando Números y SVGs
Short description:
Es un número. Estamos usando gsap nuevamente para animar el estado al nuevo valor. Esta demostración muestra el uso de SVGs en animaciones. El barco nada fuera de la pantalla cuando se presiona el botón y vuelve a aparecer cuando se presiona nuevamente. El componente de transición y el elemento G en SVG se utilizan para lograr esta animación.
Entonces, aquí tenemos un estado. Solo te lo mostraré aquí. Es un número. Y luego queremos cambiarlo a un nuevo número. Entonces, si hago clic en el botón, el estado se anima automáticamente al nuevo valor. Y la forma en que esto funciona, estamos usando gsap nuevamente. Entonces, gsap, además de poder animar valores CSS y también animar propiedades en cualquier objeto. Entonces, aquí tenemos nuestra referencia de número y está animando el valor del número al nuevo valor y tarda un segundo en hacerlo. Así que eso es realmente útil a veces. Y te mostraré en la próxima demostración. Entonces, eso fue más o menos todos los diferentes tipos de animaciones que puedes hacer con GGS. Y ahora, como soy un gran fanático de los SVGs y aún no he mostrado ningún SVG en esta charla, mostraré esta demostración que los combina todos. Entonces, aquí tenemos este barco. Si presiono este botón, nada fuera de la pantalla y luego, si presiono el botón nuevamente, vuelve a aparecer en la toma. Entonces, esto usa el componente de transición nuevamente. Solo te mostraré el código para eso. Entonces, aquí puedes ver este bloque aquí. Esto es nuestro Así que esto aquí es nuestro bloque y usamos el G, por lo que el elemento G es como el elemento div en HTML porque ahora estamos en un componente SVG. Te lo mostraré. Aquí vamos. Aquí está. Entonces, todo lo que está aquí dentro está dentro de un componente SVG. Parece HTML, pero no lo es. Todavía es XML, por lo que es bastante legible. Pero es ligeramente diferente. Entonces, aquí tenemos nuestro elemento G, que significa grupo y dentro tenemos nuestro barco. Y cuando la clase G se vuelve visible, tenemos nuestra variable boat visible, que se establece en verdadero o falso por el botón. Y aquí tenemos... está envuelto en nuestro componente de transición, que ya deberías reconocer a estas alturas. Y agrega y elimina la transformación. Entonces, cuando haces clic, se va utilizando una transformación, y luego vuelve a aparecer utilizando una transformación diferente. Aquí
13. Animando Elementos y Transiciones de Estado
Short description:
Exploramos la animación de elementos que se agregan y eliminan de una matriz utilizando el grupo de transición de Vue. También discutimos las transiciones de estado utilizando un valor de tiempo que afecta a varios componentes. GSAP se utiliza para animar suavemente el número cuando se hace clic en un botón. Esta parte resume los diferentes tipos de animación en un SVG.
Para estas nubes, estamos utilizando el grupo de transición. Entonces, solo lo explicaré un poco. Está agregando más a una matriz, y luego si lo elimino, los está eliminando de la matriz, y los está animando al entrar y salir. Así que veamos eso. A la izquierda, puedes ver justo en la parte superior, tenemos nuestra matriz de nubes. Es nuestra matriz de nubes, sus posiciones y tamaños, y luego tenemos dos funciones, addCloud y removeCloud, que agregan una nueva nube o eliminan una nube. Y luego aquí a la derecha, tenemos nuestro grupo de transición, que contiene nuestras nubes, nuevamente utilizando un v4, y luego en nuestro estilo en la parte inferior, tenemos nuestro CSS, que maneja las entradas y salidas. Entonces, entra desde la izquierda con opacidad cero, y se va hacia la derecha nuevamente con opacidad cero. Entonces, nuestras nubes no están cambiando de dirección ni nada, están utilizando diferentes posiciones de inicio y fin. Y finalmente, tenemos nuestras transiciones de estado. Entonces, aquí, todo lo que te mostraré está en el código. Tenemos un valor de tiempo, que es una referencia, que tiene un valor predeterminado de 18, es decir, las 6 p.m. Y esto se pasa a varios componentes. Por ejemplo, este es el componente de la luna. Nuestro componente de la luna aquí a la derecha, se le asigna una propiedad de tiempo y luego cambiamos la opacidad de la luna dependiendo de la hora. Por ejemplo, ahora no hay luna porque es de día. Entonces, tenemos este número y cuando lo cambiamos, muchos elementos diferentes cambiarán de estado. Por ejemplo, algunos de ellos cambian de color, algunos cambian de opacidad, algunos cambian de posición, como el sol y la opacidad como la luna. Entonces, eso no es una animación. Eso es una animación porque simplemente arrastré el controlador lentamente, pero eso no es realmente una animación. La animación aquí es que estamos utilizando GSAP nuevamente para que cuando hacemos clic en un botón, se anime suavemente ese número. Entonces, ahora mismo, el número es 18. Hago clic en este botón, se animará a 12 y podemos ver el efecto en nuestra animación. Genial. Esa es la síntesis de todos los tipos de animación en un SVG. Hemos visto transiciones sin un grupo, como el barco que entra y sale, hemos visto grupos de transición, las nubes y luego hemos visto transiciones de estado. Y eso es todo de mi charla. Gracias por escuchar.
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.
Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.
Tabla de contenidos: - Introducción a Vue3 - API de Composición - Bibliotecas principales - Ecosistema Vue3
Requisitos previos: IDE de elección (Inellij o VSC) instalado Nodejs + NPM
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend. Nivel de la masterclass: Intermedio
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Comments