Vue 38: TransitionGroup for Lists
easy⏱ 5 mincoursevue
Animating a whole v-for list
<TransitionGroup> is <transition> for lists: wrap a v-for and it animates each item's enter/leave individually using the same name-enter-* / name-leave-* class convention, plus it requires a real wrapper element via the tag prop (<TransitionGroup tag='ul'> renders an actual <ul>, unlike <transition> which renders nothing extra).
<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>
The list-move class is what makes reflow smooth
When an item is removed, everything below it needs to slide up to fill the gap. The name-move class (here list-move) is applied automatically to those repositioning siblings via FLIP animation, giving you a smooth slide instead of an instant jump — you just need to give it a transition on transform.
Module D recap
You've now covered the full toolbox for real-world forms and fine-grained reactivity: v-model modifiers and every native input type, writable computed properties, deep/immediate/flush-tuned watchers, async components behind Suspense, custom directives for raw DOM access, and CSS-driven transitions for both single elements and whole lists. That's everything you need to build a polished, animated, form-heavy Vue application end to end.