TransitionGroup for lists in Vue - Step-by-Step Execution

Concept Flow - TransitionGroup for lists

List changes detected

↓

Wrap list items in <TransitionGroup>

↓

Apply enter/leave CSS classes

↓

Animate items entering or leaving

↓

Update DOM with smooth transitions

When the list changes, Vue wraps items in <TransitionGroup>, applies CSS classes for animations, and smoothly updates the DOM.

Execution Sample

Vue

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

This code animates list items entering and leaving with a fade effect.

Execution Table

Step	Action	List Items	TransitionGroup State	Animation Applied
1	Initial render	[A, B, C]	Items wrapped in <TransitionGroup>	No animation (initial)
2	Remove item B	[A, C]	Detect item B leaving	Apply leave-active fade class to B
3	Add item D	[A, C, D]	Detect item D entering	Apply enter-active fade class to D
4	Animation ends	[A, C, D]	Update DOM removing B	Animations complete
5	No changes	[A, C, D]	Stable state	No animation

💡 No more list changes, so no further animations.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
items	[A, B, C]	[A, C]	[A, C, D]	[A, C, D]
TransitionGroup state	Wrapped items	Detect leave B	Detect enter D	Stable

Key Moments - 2 Insights

Why do we need to set a unique :key on each list item?

Vue uses the :key to track which items are entering or leaving. Without keys, the TransitionGroup cannot animate items correctly, as shown in execution_table steps 2 and 3.

What happens if we don't wrap list items in <TransitionGroup>?

Without <TransitionGroup>, Vue cannot apply enter/leave animations to list changes, so items appear or disappear instantly without smooth transitions.

Visual Quiz - 3 Questions

Look at the execution table, what animation is applied at step 3?

A leave-active fade class to item B

B no animation

C enter-active fade class to item D

D enter-active fade class to item C

💡 Hint

Check the 'Animation Applied' column at step 3 in the execution_table.

At which step does the DOM remove the leaving item?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'TransitionGroup State' and 'Animation Applied' columns to find when item B is removed.

If we forget to add :key to list items, what will happen?

A TransitionGroup cannot track items properly, so animations may not run correctly

B Animations will still work fine

C Vue will throw an error and stop rendering

D List items will duplicate

💡 Hint

Refer to key_moments about the importance of unique keys for animation tracking.

Concept Snapshot

TransitionGroup wraps list items to animate their enter and leave.
Use unique :key on each item for tracking.
Apply CSS classes for smooth transitions.
Supports adding/removing items with animation.
Without keys or TransitionGroup, no animations occur.

Full Transcript

TransitionGroup in Vue helps animate list changes. When the list changes, Vue wraps items in a <TransitionGroup> component. It uses unique keys on each item to track which items enter or leave. Vue applies CSS classes to animate these changes smoothly. For example, when an item is removed, Vue applies a leave animation before removing it from the DOM. When an item is added, Vue applies an enter animation. Without unique keys or the TransitionGroup wrapper, these animations won't work properly. This visual trace shows how items are tracked and animated step-by-step.