<TransitionGroup> List Transitions
Last updated: 2026-10-22
<TransitionGroup> List Transitions
| Group | Built-ins |
|---|---|
| Kind | Component / Element |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>
.list-move { transition: transform .4s }⚙️ Arguments
| props | tag (wrapper element, none by default), name, move-class and appear |
|---|
▶ Example
Edit the code below and see the live result:
Output：
New items appear one by one while existing rows slide aside.💡 Key Points
⚠️ Warning Every child needs a unique key — FLIP relies on it.
ℹ️ Note Positional moves use the .move class and require a CSS transition or animation.
💡 Tip tag="ul" renders a real wrapper; omit it for no wrapper.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from Transition?
A Transition handles single elements; the group handles lists.
Q No move animation?
A Check the .move transition rule and key uniqueness.
Q Can enter and move animate together?
A Yes — they run in parallel, tunable via move-class.
