TransitionGroup for lists in Vue - Mini Project: Build & Apply

Animating a List with Vue's TransitionGroup

📖 Scenario: You are building a simple to-do list app where users can add and remove tasks. To make the experience smooth and visually appealing, you want to animate the list items as they appear and disappear.

🎯 Goal: Create a Vue component that uses <TransitionGroup> to animate a list of tasks when they are added or removed.

📋 What You'll Learn

Create a reactive list of tasks in the component's data.

Add a configuration variable to hold the CSS transition name.

Use <TransitionGroup> with the configured transition name to wrap the list items.

Add buttons to add and remove tasks to see the animations in action.

💡 Why This Matters

🌍 Real World

Animating lists improves user experience in apps like to-do lists, shopping carts, and message threads by making changes smooth and clear.

💼 Career

Understanding how to use Vue's TransitionGroup is valuable for frontend developers building interactive and polished user interfaces.

1

Set up the initial list of tasks

Create a reactive variable called tasks using ref with the initial array ["Buy groceries", "Walk the dog", "Read a book"] inside the <script setup> block.

Vue

// Create a reactive variable called tasks with the array ["Buy groceries", "Walk the dog", "Read a book"]
// Your code here



  
    
  

Need a hint?

Use import { ref } from 'vue' and then const tasks = ref([...]) to create a reactive list.

2

Add a transition name configuration

Inside the <script setup> block, create a constant called transitionName and set it to the string "fade".

Vue

import { ref } from 'vue'

const tasks = ref(["Buy groceries", "Walk the dog", "Read a book"])

// Create a constant called transitionName and set it to "fade"
// Your code here



  
    
  

Need a hint?

Just create a constant with the exact name transitionName and assign it the string "fade".

3

Use TransitionGroup to animate the list

In the <template>, replace the comment with a <TransitionGroup> component that uses :name="transitionName". Inside it, use a <li> for each task with v-for="(task, index) in tasks" and :key="task + index". Display the task text inside each <li>.

Vue

import { ref } from 'vue'

const tasks = ref(["Buy groceries", "Walk the dog", "Read a book"])
const transitionName = "fade"



  
    
    
  

Need a hint?

Use <TransitionGroup> with :name="transitionName" and a v-for on <li> inside it.

4

Add buttons to add and remove tasks

Below the <TransitionGroup>, add two buttons: one with @click="tasks.push('New Task')" labeled Add Task, and another with @click="tasks.pop()" labeled Remove Task.

Vue

import { ref } from 'vue'

const tasks = ref(["Buy groceries", "Walk the dog", "Read a book"])
const transitionName = "fade"



  
    
      
        {{ task }}
      
    
    
    
  

Need a hint?

Add two buttons with the exact click handlers to add and remove tasks from the tasks array.