Las transiciones y las animaciones juegan un papel importante en la experiencia del usuario. Al agregar animaciones sutiles y transiciones entre elementos en la página web, puede mejorar la experiencia del usuario. El sitio web parecerá mucho más fluido, más atractivo y, en general, mejor en todo momento.

Este tutorial demuestra cómo implementar transiciones y animaciones en Vue.js. Aprenderá a crear tanto transiciones simples como animaciones complejas usando el transición componentes y fotogramas clave CSS.

El componente de transición de Vue.js

Vue.js tiene un incorporado transición componente que le permite crear animaciones en su aplicación. Este componente envuelve el elemento de destino que queremos animar.

Aquí el componente de transición envuelve el encabezado de nivel uno:

 Hola </h1>
</transition>

Cuando envuelves un elemento con el transición componente, el componente aplicará clases de transición al elemento que envuelve. Hay seis clases de transición en total. Tres controlan la animación del elemento cuando ingresa a la página. Los otros tres controlan la animación del elemento cuando sale de la página.

El código utilizado en este artículo está disponible en este repositorio GitHub y es gratis para su uso bajo la licencia MIT.

Aplicar clases de transición cuando los elementos ingresan a la página

Durante el proceso de ingreso del elemento al DOM, el transición componente aplica las clases entrar desde, entrar a, y enter-activo lo. Estas clases le permiten controlar cómo el elemento se animará o transitará en la página.

• entrar desde: se aplica al elemento antes de que entre en un navegador. Utiliza esta clase para establecer el estado CSS inicial del elemento.
• entrar a: se aplica al elemento cuando ingresa al navegador. Utiliza esta clase para establecer el estado CSS final del elemento.
• enter-activo: Se aplica mientras el elemento está en transición de un estado a otro. Aquí es donde usted dicta cuánto tiempo llevará la transición.

Veamos un ejemplo:

<transición>
 <h1> Holah1>
transición>
.entrar-desde {
opacidad: 0;
}
.entrar a {
opacidad: 1;
}
.enter-activo {
transición: opacidad 2sfacilidad;
}

Con este código, el encabezado de nivel uno tarda dos segundos en pasar de invisible (opacidad: 0) a completamente visible (opacidad: 1). Esta transición ocurre cuando el elemento ingresa al DOM. Sin la transición, el texto habría aparecido inmediatamente en el navegador una vez que se carga la página.

Aplicar clases de transición cuando los elementos abandonan la página

El transición El componente admite otras tres clases de transición que debe aplicar cuando el elemento abandona el DOM. Sus nombres son salir de, dejar, y licencia activa. Estas clases controlan cómo el elemento se animará o transitará desde la página.

Como habrás adivinado, estas clases son similares a las ingresar- clases de las que hablamos antes. Pero estas clases solo se activan cuando el elemento está a punto de desmontarse del DOM. El montaje y desmontaje son conceptos importantes del DOM. Como desarrollador, debe tener un comprensión básica del DOM y otros conceptos relacionados.

Veamos un ejemplo:

<transición>
 <h1> Holah1>
transición>
.salir de {
opacidad: 0;
}
.dejar {
opacidad: 1;
}
.dejar-activo {
transición: opacidad 2sfacilidad;
}

En este caso, el encabezado de nivel uno tarda dos segundos en pasar lentamente de visible (opacidad: 1) a invisible (opacidad: 0). Esta transición ocurre cuando el elemento deja el DOM. Sin la transición, el texto habría desaparecido del navegador al instante.

Uso de nombres de transición

También puede agregar un nombre atribuya a su componente de transición. Cuando haga esto, Vue agregará el nombre a sus clases de transición. Esto significa que puede tener varias transiciones en su página, cada una con clases de transición y propiedades CSS únicas.

Por ejemplo, si establece el nombre desteñir en su componente de transición, todas las clases de transición tendrán el prefijo desteñir:

<transiciónnombre ="desteñir">
 <h1> Holah1>
transición>
.fade-enter-desde {
opacidad: 1;
}
.fade-leave-from {
opacidad: 1;
}
// otro "ingresar" y "dejar" clasesconeldesteñircomoprefijo

Creación de transiciones utilizando el componente de transición

Para demostrar la transición en Vue.js, envolverá un H1 dentro de transición componente. Debajo, creará un botón. Cuando se hace clic en este botón, cambia la variable mostrar título entre FALSO y verdadero.

Aquí está el código:

A continuación, defina la guion sección. Esta sección contiene la configuración método en el que se inicializa el mostrar título variables con FALSO.