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.

Practice

1. What is the main purpose of using <TransitionGroup> in Vue?

easy

A. To animate list items when they are added, removed, or moved

B. To fetch data asynchronously before rendering a list

C. To validate form inputs inside a list

D. To create a static list without any animations

Solution

1. Step 1: Understand the role of <TransitionGroup>

   <TransitionGroup> is designed to animate changes in lists, such as adding or removing items.

2. Step 2: Compare with other options

   Options A, C, and D describe unrelated tasks like data fetching, form validation, or static lists without animation.

3. Final Answer:

   To animate list items when they are added, removed, or moved -> Option A

4. Quick Check:

   TransitionGroup animates list changes = B [OK]

Hint: TransitionGroup is for smooth list animations only [OK]

Common Mistakes:

• Thinking TransitionGroup fetches data
• Confusing TransitionGroup with form validation
• Assuming it creates static lists without animation

2. Which of the following is the correct way to specify the wrapper element for a <TransitionGroup> in Vue?

easy

A. <TransitionGroup element="ul">

B. <TransitionGroup wrapper="ul">

C. <TransitionGroup tag="ul">

D. <TransitionGroup container="ul">

Solution

1. Step 1: Recall the correct attribute for wrapper element

   The tag attribute sets the HTML element used as the wrapper in <TransitionGroup>.

2. Step 2: Verify the options

   Only <TransitionGroup tag="ul"> uses tag="ul", which is the correct syntax. Others use invalid attributes like wrapper, element, or container.

3. Final Answer:

   <TransitionGroup tag="ul"> -> Option C

4. Quick Check:

   Wrapper element uses tag attribute = C [OK]

Hint: Use tag="element" to set wrapper in TransitionGroup [OK]

Common Mistakes:

• Using wrapper or element instead of tag
• Omitting the tag attribute and expecting default
• Confusing with other component props

3. Given this Vue template snippet, what will be the rendered output when the items array is ["A", "B"]?

<TransitionGroup tag="ul" name="fade">
  <li v-for="item in items" :key="item">{{ item }}</li>
</TransitionGroup>

medium

A. AB with fade animation on changes

B. AB with no animation

C. AB but no animation because key is missing

D. Syntax error due to missing key attribute

Solution

1. Step 1: Analyze the template structure

   The <TransitionGroup> uses tag="ul", so the wrapper is a <ul> element. The list items have unique keys from the item values.

2. Step 2: Understand the output and animation

   The list renders as <ul><li>A</li><li>B</li></ul> and uses the "fade" CSS classes for animation on changes.

3. Final Answer:

   <ul><li>A</li><li>B</li></ul> with fade animation on changes -> Option A

4. Quick Check:

   Unique keys + tag="ul" = animated <ul> list [OK]

Hint: Check tag and keys to predict output and animation [OK]

Common Mistakes:

• Assuming default wrapper is div instead of ul
• Forgetting to add unique keys causing no animation
• Thinking missing key causes syntax error

4. Identify the error in this Vue code using <TransitionGroup>:

<TransitionGroup tag="ul" name="slide">
  <li v-for="item in items">{{ item }}</li>
</TransitionGroup>

medium

A. Incorrect tag attribute value; should be div

B. Missing unique :key attribute on list items

C. name attribute cannot be used with TransitionGroup

D. v-for syntax is invalid

Solution

1. Step 1: Check for required attributes in v-for

   Each item in a list rendered by v-for inside <TransitionGroup> must have a unique :key attribute to track changes for animation.

2. Step 2: Validate other attributes

   The tag="ul" and name="slide" are valid. The v-for syntax is correct.

3. Final Answer:

   Missing unique :key attribute on list items -> Option B

4. Quick Check:

   Unique keys required for TransitionGroup lists = A [OK]

Hint: Always add :key on v-for items inside TransitionGroup [OK]

Common Mistakes:

• Ignoring the need for :key causing animation issues
• Thinking tag must be div
• Believing name attribute is invalid

5. You want to animate a list of tasks with <TransitionGroup> using a custom CSS animation named "bounce". The tasks array may have duplicate names. Which approach ensures smooth animations without glitches?

hard

A. Do not use keys and rely on default behavior with name="bounce"

B. Use :key="task" on list items and set name="bounce" on TransitionGroup

C. Use :key="index" on list items and set name="bounce" on TransitionGroup

D. Use :key="task + index" on list items and set name="bounce" on TransitionGroup

Solution

1. Step 1: Understand the importance of unique keys

   Keys must be unique to avoid animation glitches. Since tasks may have duplicate names, using just the task name as key is unsafe.

2. Step 2: Combine task and index for uniqueness

   Concatenating task and index (e.g., task + index) creates unique keys even if names repeat, ensuring smooth animations.

3. Step 3: Confirm usage of name attribute

   Setting name="bounce" on <TransitionGroup> applies the correct CSS animation classes.

4. Final Answer:

   Use :key="task + index" on list items and set name="bounce" on TransitionGroup -> Option D

5. Quick Check:

   Unique keys + name="bounce" = smooth animations [OK]

Hint: Combine value and index for unique keys with animations [OK]

Common Mistakes:

• Using task name alone as key when duplicates exist
• Using index alone causing wrong animation order
• Skipping keys causing animation glitches