How to Animate List in Vue: Simple Guide with Examples

To animate a list in Vue, wrap the list items inside a <transition-group> component and apply CSS transition classes or animations. Vue automatically detects list changes and applies animations when items are added, removed, or moved.

Syntax

Use the <transition-group> component to wrap your list. It requires a tag attribute to specify the HTML element that will wrap the list items. Each list item must have a unique key for Vue to track changes.

• <transition-group>: Wraps the list and enables animations.
• tag: Defines the wrapper element (e.g., ul or div).
• key: Unique identifier for each list item.
• CSS classes control the animation phases: v-enter-from, v-enter-active, v-leave-to, etc.

vue

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

Example

This example shows a list of items that animate when added or removed. The fade CSS classes define a simple fade effect. Clicking buttons adds or removes items with smooth transitions.

vue

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <transition-group name="fade" tag="ul">
      <li v-for="item in items" :key="item.id">{{ 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 scoped>
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.fade-enter-active, .fade-leave-active {
  transition: all 0.3s ease;
}
</style>

Output

A vertical list of items with fade and slide animation when items are added or removed by clicking buttons.

Common Pitfalls

Common mistakes when animating lists in Vue include:

• Not providing a unique key on list items, causing Vue to fail tracking changes and skipping animations.
• Using <transition> instead of <transition-group> for lists, which only animates single elements.
• Forgetting to set the tag attribute on <transition-group>, which defaults to span and may break layout.
• Not defining CSS classes for the transition phases, so no visible animation occurs.

vue

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

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

Quick Reference

• Wrap lists with <transition-group> and set tag.
• Always add unique key to list items.
• Define CSS classes for v-enter-from, v-enter-active, v-leave-to, and v-leave-active.
• Use CSS transitions or animations for smooth effects.
• Test animations by adding/removing items dynamically.

Key Takeaways

Use with a tag and unique keys to animate lists in Vue.

Define CSS transition classes to control how list items enter and leave.

Never forget unique keys on list items to enable proper animation tracking.

Use instead of for multiple elements like lists.

Test animations by dynamically adding or removing list items.