Transiciones con fade en Vue.js

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:39

Transiciones con fade en Vue.js

Curso de Vue.js: Componentes y Composition API

Clase 6 de 23

Clase 6 / 23

Recursos

Animar la aparición y desaparición de elementos en una interfaz mejora la percepción de fluidez y profesionalismo. Con el componente transition de Vue.js puedes aplicar estilos CSS automáticamente cuando un elemento entra o sale del DOM, sin escribir lógica adicional ni librerías externas.

Esta guía está pensada para desarrolladores frontend que ya construyen componentes en Vue y quieren añadir animaciones reutilizables, como menús desplegables o galerías, usando solo clases CSS y la API que Vue ya trae integrada.

Qué es el componente transition de Vue.js y para qué sirve

El componente transition es un built-in de Vue.js que envuelve un único elemento y aplica clases CSS en momentos específicos del ciclo de aparición o desaparición. La idea es que tú declares un nombre de transición y Vue se encargue de añadir y quitar las clases en el instante correcto.

Un caso típico es un menú que se muestra u oculta al hacer clic en un botón, controlado por una variable booleana. También aplica para galerías de fotos, paneles de detalles o cualquier elemento que aparezca y desaparezca según el estado.

¿Qué hace el componente transition en Vue.js? Aplica clases CSS automáticamente cuando un elemento entra o sale del DOM, permitiéndote animar opacidad, posición, color o cualquier propiedad CSS sin escribir JavaScript adicional.

Cómo se monta el ejemplo del menú desplegable

En el proyecto creado con la CLI de Vue, primero defines un botón y una variable show en data con valor inicial false. El clic alterna esa variable entre verdadero y falso [01:30].

Luego creas un componente externo Menu.vue con una lista simple de tres opciones y lo importas en el componente raíz. Para mostrarlo u ocultarlo tienes dos directivas posibles:

v-if: monta y desmonta el componente del DOM por completo.
v-show: lo mantiene en el DOM y solo alterna display: none con CSS.

La diferencia importa porque v-show es más eficiente cuando el elemento aparece y desaparece con frecuencia, ya que evita el costo de montar y desmontar [02:50].

Cómo envolver el elemento con transition

Dentro del template, envuelves el componente Menu con la etiqueta <transition> y le pasas la propiedad name, por ejemplo fade. Ese nombre es la raíz que Vue usará para buscar tus clases CSS.

vue <transition name="fade">

Vue no añade ningún div ni elemento extra al HTML. Solo gestiona las clases sobre el elemento envuelto [04:10].

Cuáles son las clases de transición que reconoce Vue.js

Vue espera que escribas clases CSS con una nomenclatura específica basada en el nombre que definiste. Hay dos estados y tres momentos que combinar.

Los dos estados son:

enter: el elemento que aparece en pantalla.
leave: el elemento que desaparece.

Los tres momentos son:

from: el instante inicial de la transición.
active: mientras la transición ocurre.
to: el estado final.

Combinándolos obtienes clases como fade-enter-from, fade-enter-active, fade-enter-to, fade-leave-from, fade-leave-active y fade-leave-to. Cada una se activa en el momento exacto que indica su nombre [05:40].

¿Qué diferencia hay entre enter-from y enter-to? enter-from define el estado inicial cuando el elemento aún no es visible, y enter-to define el estado final ya visible. Vue interpola entre ambos durante la duración que marques en enter-active.

Cómo aplicar un fade in y fade out con opacity

Para lograr un desvanecimiento suave, defines la transición CSS sobre la propiedad opacity en las clases active, y los valores extremos en from y to.

css .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; }

.fade-enter-from, .fade-leave-to { opacity: 0; }

La propiedad transition de CSS recibe la propiedad a animar, la duración (0.5 segundos) y la curva de aceleración (ease). El valor por defecto de opacity es 1, así que solo necesitas declarar el estado en cero para que Vue interpole entre ambos extremos [08:20].

Si olvidas declarar fade-enter-from con opacity: 0, el elemento aparecerá de golpe en lugar de desvanecerse al entrar. Ese detalle es fácil de pasar por alto y rompe la simetría visual de la animación.

Por qué usar v-show en lugar de v-if con transiciones

Cuando combinas v-show con transition, el elemento permanece en el DOM y Vue solo alterna su visibilidad aplicando las clases. Esto produce animaciones más fluidas porque no hay un montaje desde cero cada vez que aparece.

Con v-if también funciona, pero el componente se reconstruye en cada ciclo, lo que puede ser innecesario para elementos simples como un menú [03:15].

Qué otras propiedades puedes animar más allá de opacity

La opacidad es solo el comienzo. El componente transition acepta cualquier propiedad CSS animable, lo que abre opciones como:

transform para deslizamientos, escalas o rotaciones.
background-color para cambios de color.
height o width para expandir y contraer.
border para resaltar bordes durante la entrada o salida.

Durante el ejemplo se experimenta con un borde rojo y un fondo del mismo color para visualizar exactamente cuándo se aplica cada clase, lo que ayuda a entender el ciclo antes de pulir la animación final [07:00].

El componente transition tiene más características avanzadas como modes, hooks en JavaScript y soporte para grupos con transition-group. Vale la pena explorar la documentación oficial y compartir tus experimentos en los comentarios.