TransitionGroup for lists in Vue

Introduction

TransitionGroup helps animate items when you add, remove, or reorder a list. It makes changes smooth and easy to see.

You want to show a list of tasks that can be added or removed with animation.

You have a photo gallery where images appear or disappear with effects.

You want to reorder a list and show the movement with animation.

You want to highlight changes in a chat message list smoothly.

Syntax

Vue

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

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, text: 'First' },
  { id: 2, text: 'Second' },
  { id: 3, text: 'Third' }
])
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

The name attribute sets the CSS classes prefix for animations.

The tag attribute defines which HTML tag wraps the list items.

Examples

Using a div wrapper instead of ul for the list container.

Vue

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

Shows how TransitionGroup behaves with an empty list (no items to animate).

Vue

<transition-group name="fade" tag="ul">
  <!-- Empty list -->
</transition-group>

Basic list with fade animation on adding or removing items.

Vue

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

Sample Program

This Vue component shows a list with buttons to add or remove items. The list uses TransitionGroup to animate items fading in and out. Each item is focusable for accessibility.

Vue

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <transition-group name="fade" tag="ul" aria-label="Animated list">
      <li v-for="item in items" :key="item.id" tabindex="0">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, text: 'Learn Vue' },
  { id: 2, text: 'Build App' },
  { id: 3, text: 'Deploy' }
])

let nextId = 4

function addItem() {
  items.value.push({ id: nextId++, text: `New Item ${nextId - 1}` })
}

function removeItem() {
  items.value.pop()
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  background: #def;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border-radius: 0.25rem;
}
button {
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}
</style>

Important Notes

TransitionGroup animations run when items enter, leave, or move in the list.

Use unique :key values for each item to help Vue track changes correctly.

Time complexity depends on list size; animations add small overhead but improve user experience.

Summary

TransitionGroup animates list changes smoothly.

Use name for CSS animation classes and tag for the wrapper element.

Always provide unique keys for list items to avoid animation glitches.