Aplica suaves transiciones entre elementos HTML no/visibles en Vue 3 con el v-if

▶

Cuando creamos nuestras primeras interfaces o componentes en Vue, la parte del HTML al momento de mostrar u ocultar un bloque mediante condicionales o los show podía sentirse brusco… hasta que entendí cómo usar transiciones con v-if. Desde entonces, cada vez que quiero elevar la experiencia de usuario, recurro al componente <transition> porque es flexible, elegante y realmente sencillo de aplicar.

A continuación te explico todo lo necesario para dominar estas transiciones condicionales: desde lo básico hasta patrones y microinteracciones avanzadas.

Qué son las transiciones en Vue y por qué importan al usar v-if

En Vue, las transiciones son una forma declarativa de animar la entrada y salida de un elemento del DOM. Y cuando digo entrada y salida, hablo precisamente de lo que ocurre cuando usas v-if: el bloque aparece o desaparece por completo del DOM.

En mi caso, la primera vez que animé un bloque con v-if, me di cuenta de que tenía en mis manos una herramienta muy potente: cualquier contenido puede mostrarse con un efecto suave mientras se monta o desmonta del DOM. Y lo mejor es que todo depende de CSS, o de hooks JS si quieres ir más lejos.

Diferencia entre v-if y v-show en animaciones

• v-if → monta/desmonta el nodo, por lo que las transiciones tienen enter y leave completos. Perfecto para animaciones completas.
• v-show → solo altera display: none, así que no desmonta el elemento. Es útil para animaciones simples de opacity, pero no para transiciones complejas.

Qué controla el ciclo enter / leave

Vue genera automáticamente clases como:

• xxx-enter-from → estado inicial al aparecer
• xxx-enter-active → transición aplicada al entrar
• xxx-enter-to → estado final

Y sus equivalentes leave-* al salir.

Cómo funciona el componente <transition> paso a paso

El componente <transition> envuelve cualquier elemento que quieras animar. Solo necesitas darle un name, y Vue generará las clases con ese prefijo.

Clases CSS que Vue genera automáticamente

Si tu transición se llama fade-slide, Vue generará:

• .fade-slide-enter-from
• .fade-slide-enter-active
• .fade-slide-enter-to
• .fade-slide-leave-from
• .fade-slide-leave-active
• .fade-slide-leave-to

Prefijos, sufijos y nombres de transición

A mí me gusta usar nombres semánticos:

• fade
• slide
• fade-slide
• scale-up

El componente queda limpio, y tu CSS habla por sí mismo.

Ejemplo práctico: animar un bloque con v-if usando fade-slide

Con Vue, podemos realizar todo tipo de desarrollos lo cual incluye, poder mostrar contenido, contenido que podemos mostrar con suaves transiciones de todo tipo en donde lo que podamos hacer con CSS es el límite.

El ejemplo queda como:

<transition name="fade-slide">
   <div class="mycard-primary mb-5 block max-w-96" v-if="CONDITION">
       <div class="mycard-body">
           <h3 class="text-xl mb-3 ml-4">Add this item</h3>
           <cart-item :post="post" />
       </div>
   </div>
</transition>
***
<style>
.fade-slide-enter-active,
.fade-slide-leave-active {
   transition: all 0.4s ease;
}

.fade-slide-enter-from,
.fade-slide-leave-to {
   opacity: 0;
   transform: translateY(20px);
}

.fade-slide-enter-to,
.fade-slide-leave-from {
   opacity: 1;
   transform: translateY(0);
}
</style>

En mi blog tengo mucho material sobre Animaciones y Transiciones en CCS pero estas como quien dice son las reglas.

El truco está en que el <transition> envuelve un único elemento raíz. Si necesitas animar más de uno, usa <transition-group>.

La condición -CONDITION- especifica cuando se oculta o muestra el elemento y en base a la transición que estamos implementando, el como se va a mostrar y ocultar.

Las transiciones en Vue son muy sencillas, al elemento HTML usamos la etiqueta transition con un nombre (en este ejemplo el de fade-slide) y para el CSS definimos clases que empleen como prefijo el nombre de la etiqueta transition y sufijos como, el de -enter-active y -leave-active para indicar el comportamiento cuando mostramos/ocultamos el elemento HTML.

El resto de las clases, son para especificar el comportamiento de cuando se muestra u oculta en donde la imaginación es el límite.

Errores comunes al animar elementos condicionales

Los que considero que son los errores más comunes:

• Poner el v-if fuera del <transition>
• Olvidar definir las clases *-enter-from y *-leave-to
• No incluir un transition: en *-active
• Usar v-if en listas cuando debería ser transition-group

Preguntas frecuentes sobre transiciones con v-if en Vue

1. ¿Se pueden usar transiciones con v-if y v-show por igual?
   1. No. v-if monta/desmonta; v-show no. Eso cambia totalmente la animación.
2. ¿Por qué mi transición no funciona con v-if?
   1. Revisa que el <transition> envuelva el elemento raíz, que el name coincida y que tus clases tengan transition:.
3. ¿Cómo evito un salto brusco al mostrar elementos?
   1. Asegura un estado inicial definido en enter-from.
4. ¿Cuándo usar CSS y cuándo usar hooks JS?
   1. CSS para la mayoría de casos; hooks JS para animaciones dependientes del layout o de cálculos avanzados.

Conclusión

Animar elementos con v-if en Vue es una de esas cosas que parece compleja pero en realidad es muy directa. Personalmente, cada vez que aplico transiciones condicionales la interfaz gana fluidez y los usuarios sienten una experiencia más pulida. Basta con entender el ciclo enter/leave y dominar un par de patrones CSS.

Si animas modales, tarjetas, menús o cualquier elemento que aparezca/desaparezca, usar <transition> con v-if te va a simplificar muchísimo el trabajo.