<TransitionGroup>
Animates insertion, removal, and reordering of list items.
Syntax
<TransitionGroup name="list" tag="ul">...</TransitionGroup>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
tag | string | No | Element to render as the list wrapper (optional). |
name | string | No | Prefix for the transition classes. |
Returns
component — Animates a v-for list.
Examples
<script setup lang="ts">
import { ref } from 'vue';
const items = ref([1, 2, 3]);
</script>
<template>
<TransitionGroup name="list" tag="ul">
<li v-for="n in items" :key="n">{{ n }}</li>
</TransitionGroup>
</template>
<style>
.list-enter-from, .list-leave-to { opacity: 0; }
.list-move { transition: transform 0.3s; }
</style>
Notes
Unlike <Transition>, it renders a real wrapper element (set via `tag`) and
supports multiple children that must each have a unique `:key`. The
`name-move` class enables smooth reordering animations via FLIP. Ideal for
animated lists, grids, and sortable collections.