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.

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