Vue 38: TransitionGroup para Listas
easy⏱ 5 mincoursevue
Animando una lista v-for completa
<TransitionGroup> es el <transition> de las listas: envuelve un v-for y anima la entrada/salida de cada elemento individualmente usando la misma convención de clases name-enter-* / name-leave-*, y además requiere un elemento contenedor real mediante la prop tag (<TransitionGroup tag='ul'> renderiza un <ul> real, a diferencia de <transition> que no renderiza nada adicional).
<template>
<TransitionGroup name='list' tag='ul'>
<li v-for='item in items' :key='item.id'>
{{ item.text }}
</li>
</TransitionGroup>
</template>
<style>
.list-enter-active, .list-leave-active {
transition: all 0.35s ease;
}
.list-enter-from, .list-leave-to {
opacity: 0;
transform: translateX(-24px);
}
.list-move {
transition: transform 0.35s ease;
}
</style>
La clase list-move es la que suaviza el reflow
Cuando se quita un elemento, todo lo que está debajo necesita deslizarse hacia arriba para llenar el hueco. La clase name-move (aquí list-move) se aplica automáticamente a esos hermanos que se reposicionan mediante animación FLIP, dándote un deslizamiento suave en vez de un salto instantáneo — solo necesitas darle una transition sobre transform.
Repaso del Módulo D
Ya cubriste el set completo de herramientas para formularios del mundo real y reactividad fina: modificadores de v-model y todos los tipos de input nativos, propiedades computed escribibles, watchers ajustados con deep/immediate/flush, componentes asíncronos detrás de Suspense, directivas personalizadas para acceso directo al DOM, y transiciones basadas en CSS tanto para elementos individuales como para listas completas. Eso es todo lo que necesitas para construir, de principio a fin, una aplicación Vue pulida, animada y rica en formularios.