Cómo crear transiciones Vue.js

Las transiciones no son solo para agregar un toque bonito a su aplicación. Una buena transición puede ser la diferencia entre que un usuario se registre, realice una compra o abandone por completo su sitio web. Por ejemplo, Amazon descubrió que les costó alrededor del 1% en ventas por cada 100 ms de latencia.

Puede mitigar el riesgo de que los usuarios abandonen su sitio con una buena transición. La forma en que Vue.js maneja las transiciones y animaciones hace que sea muy fácil agregarlas a su aplicación.

Vue.js le ofrece una variedad de formas de animar su aplicación, incluidas las transiciones y animaciones CSS, y el uso de JavaScript para manipular el DOM durante los ganchos de transición. Incluso puede conectar bibliotecas de terceros como GSAP o VelocityJS.

En esta publicación nos centraremos en los fundamentos de cómo Vue.js maneja las transiciones CSS. Con este conocimiento, podrá comenzar a crear sus propias transiciones. Una vez que tenga los fundamentos bajos, puede pasar rápidamente a dominar todo el poder de las capacidades de transición y animación de Vue.

Transiciones vs. Animaciones

Exploremos las diferencias entre transiciones y animaciones antes de sumergirnos.

Una transición es cuando un elemento va de A a B. Se limitan a dos etapas: pasar del estado inicial (A) al estado final (B). Funcionan realmente bien para cosas como pasar el mouse sobre enlaces y botones, o agregar un nuevo elemento a una lista. El objetivo principal de las transiciones es crear una demostración natural de que algo ha cambiado. Un buen ejemplo de una transición en el mundo real serían las puertas automáticas. Empiezan a cerrarse y cuando te pones delante de ellos, pasan automáticamente al estado abierto.

Aquí hay un ejemplo de una transición simple desde la página de inicio de Stripe.

Las animaciones, por otro lado, pueden tener muchos estados intermedios conocidos como fotogramas clave. Pueden ir de A a B a C a D y más allá. Son útiles para cosas como un spinner de carga o un visualizador de audio. Su objetivo principal es mostrar continuamente que algo está cambiando. Pueden tener estados finales, pero a diferencia de las transiciones, no se limitan a dos estados. En la naturaleza, un remolino sería un ejemplo de animación. Está continuamente en un estado cambiante y giratorio, pero podría llegar a su fin con el tiempo.

Un ejemplo de una animación en la página de pago de Stripe.

En cierto modo, las animaciones son solo super transiciones porque agregan más estados intermedios. Si bien las transiciones solo van de A a B, las animaciones pueden tener tantos estados intermedios como sea necesario. Después de comprender los fundamentos de las transiciones, dar el salto a las animaciones es un paso fácil.

En esta publicación, nos centraremos exclusivamente en las transiciones y en cómo crear la transición de desplazamiento del menú desde el ejemplo de Stripe anterior.

Comenzaremos con el siguiente HTML:

El elemento de transición

Vue.js tiene un elemento envoltorio que simplifica el manejo de animaciones JavaScript, animaciones CSS y transiciones CSS en sus elementos o componentes.

En el caso de las transiciones CSS, el elemento se encarga de aplicar y no aplicar clases. Todo lo que tiene que hacer es definir cómo desea que se vea el elemento durante la transición.

Actúa como cualquier otro componente de Vue.js, y puede usar las mismas directivas como v-if y v-show.

Para nuestro elemento de menú emergente podemos ajustar el marcado de menú emergente con este elemento y darle un nombre.


  

Clases de Transición

El elemento de transición aplica seis clases a su marcado que puede usar para manejar por separado sus transiciones de entrada y salida. Hay tres clases para manejar la transición de A a B para cuando se muestra el elemento, y otras tres para manejar la transición de A a B para cuando se elimina el elemento.

La transición de entrada ocurre cuando el componente se está habilitando o se muestra. Esas clases son: v-enter, v-enter-active, v-enter-to

La transición de ausencia es cuando el componente está siendo deshabilitado o eliminado. Esas clases son: v-leave, v-leave-active y v-leave-to

El prefijo v es el predeterminado cuando usa un elemento sin nombre. En nuestro caso, dado que nombramos la transición menu-popover, la clase v-enter en su lugar sería menu-popover-enter.

Ingresar transiciones

En el caso del menú emergente del menú, la transición de entrada sería cuando el usuario inicialmente se desplaza sobre el menú.

v-enter es la clase que utiliza para definir qué es eso. Una parte de una transición. En otras palabras, define los estilos iniciales de la transición.

v-enter-to es la clase que utiliza para definir la parte B o los estilos finales de la transición.

v-enter-active es la clase que te ayuda a definir cómo ir de A a B. Entonces, aquí es donde van cosas como la duración y las funciones de relajación.

menu-popover-enter

Antes de pasar el mouse sobre el menú emergente, su estado inicial es invisible. También tiene un ligero efecto de transformación de rotación aplicado, y luego se activa. Esta clase tiene el siguiente aspecto:

.menu-popover-enter {
  opacidad: 0;
  transformar: rotar Y (50 grados);
}

menu-popover-enter-to

Una vez que hayas colocado el cursor sobre el menú emergente, su estado final es completamente visible y no se transforma. Esa transición final se parece a la siguiente:

.menu-popover-enter-to {
  opacidad: 1;
  transform: rotateY (0deg);
}

menu-popover-enter-active

Aquí es donde puede aplicar los estilos que manejan cómo ocurrirá esa transición. En el caso de Stripe, es una transición bastante rápida que ocurre en unos 200 ms y anima tanto la opacidad como la transformación al mismo tiempo. También parece tener una ligera animación de facilitación.

Podemos definir todo eso dentro de esta animación aquí:

.menu-popover-enter-active {
  transición: opacidad, transformación 200ms facilidad;
}

Deja transiciones

La transición de abandono del menú emergente del menú es cuando el usuario se desplaza fuera del menú y el elemento de transición se oculta. Es una transición completamente separada de la transición de entrada.

Crear fácilmente transiciones inversas

Para el 90% de los casos, la forma en que algo se transiciona es solo la inversa de la forma en que transita, pero sigue siendo una transición separada. Una transición para cuando ingresa a la pantalla (pasa el mouse sobre el menú) y otra transición para cuando sale (pasa el mouse del menú).

Para que eso suceda con el menú emergente del menú, solo nos aseguraremos de que la clase v-leave sea la misma que la clase v-enter-to para que las transiciones de salida comiencen donde terminó la transición de entrada.

Entonces, v-leave-to sería lo mismo que la clase v-enter para que termine donde comenzó.

Finalmente, nos aseguraremos de que las clases v-enter-active y v-leave-active sean las mismas para que ambas transiciones tengan la misma velocidad.

.menu-popover-enter,
.menu-popover-leave-to {
  opacidad: 0;
  transformar: rotar Y (50 grados);
}
.menu-popover-enter-to,
.menu-popover-leave {
  opacidad: 1;
  transform: rotateY (0deg);
}
.menu-popover-enter-active,
.menu-popover-leave-active {
  transición: opacidad, transformación 200ms facilidad;
}

Construyendo sobre los fundamentos

Con este conocimiento fundamental de las transiciones, es fácil ver cómo funcionan las animaciones CSS y luego comprender algo aún más poderoso como las animaciones JavaScript. El elemento de transición puede ayudar con todo eso.

Para obtener información más detallada sobre cómo Vue maneja las transiciones CSS y todas las complejidades del elemento de transición, visite la guía de transiciones en la Documentación de Vue.js.

Seguir aprendiendo

Vue Mastery cubre transiciones y animaciones con más profundidad en nuestro curso Vue del mundo real. ¡Echale un vistazo!

Sigue leyendo

  • Acelere su tiempo de desarrollo con Vue DevTools
  • 10 razones para usar Nuxt.js
  • Las mejores prácticas para Nuxt.js SEO