Animación y Vue.js

Rate this content
Bookmark

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.

Callum Macrae
Callum Macrae
32 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.
Available in English: Animation and 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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
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.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
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.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
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.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
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.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
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.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
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.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
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
Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
WorkshopFree
Frank Force
Frank Force
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.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
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
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
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.
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
¡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.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- 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