How to use transition-group in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Animating lists when items are added, removed, or reordered creates a much better user experience than instant changes, especially in task lists or data tables.
As the creator of CoreUI with over 12 years of Vue.js development experience since 2014, I’ve built numerous animated list interfaces for enterprise applications.
Vue 3 provides the TransitionGroup component specifically for animating multiple elements or lists with v-for loops.
Unlike the Transition component which handles single elements, TransitionGroup manages transitions for each item independently.
Use TransitionGroup to wrap v-for lists and apply transition classes to animate items.
<template>
<button @click='addItem'>Add Item</button>
<TransitionGroup name='list' tag='ul'>
<li v-for='item in items' :key='item.id' @click='removeItem(item.id)'>
{{ item.text }}
</li>
</TransitionGroup>
</template>
<script setup>
import { ref } from 'vue'
const items = ref([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
])
const addItem = () => {
items.value.push({ id: Date.now(), text: `Item ${items.value.length + 1}` })
}
const removeItem = (id) => {
items.value = items.value.filter(item => item.id !== id)
}
</script>
<style scoped>
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
Best Practice Note
TransitionGroup renders a real DOM element specified by the tag prop (default is span). Each child must have a unique key attribute for Vue to track items correctly. The CSS classes work identically to Transition, but apply to each item individually. For move transitions when items change position, add .list-move class with transitions. This is the same approach we use in CoreUI dashboard templates for animated todo lists, notification panels, and dynamic data tables.
