Transition Group

The <transition-group> component lets you animate lists as items are added, removed, or reordered.

Use <transition-group> when you want to apply transitions to multiple elements rendered with v-for. Each child must have a unique key.

When to Use

• Animating list items on enter, leave, or move.
• Creating smooth transitions for dynamic lists, such as to-do lists or notifications.

Props

• name: Base name for transition CSS classes.
• tag: The HTML tag to render as the group container (default is span).

<transition-group name="fade" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

Example

<transition-group name="list">
  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
</transition-group>

Notes

• Define CSS classes for the transition (e.g., .list-enter-active, .list-leave-active, etc.).
• <transition-group> does not work with components that do not support the key attribute.
• Use the move class to animate reordering.

.list-move {
  transition: transform 0.5s;
}