TransitionGroup for List Animations
Animating v-for lists, move transitions, staggered animations with delay.
Animating Lists
<Transition> handles a single element. For lists rendered with v-for, use <TransitionGroup>, which animates items as they are added, removed, and reordered.
The tag Prop
Unlike Transition, TransitionGroup can render a real wrapper element. Pass tag="ul" (or any tag) and it outputs that element around the list items.
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</TransitionGroup>All lessons in this course
- The Transition Component
- CSS Transitions and Animations
- JavaScript Transition Hooks
- TransitionGroup for List Animations