🎞️ Vue Animations with v-for – Animate Lists with transition-group (2025 Guide)

---

🧲 Introduction – Why Animate v-for Lists in Vue?

Animating elements rendered with v-for makes your app visually dynamic and interactive. Vue provides a special component called <transition-group> for handling animations when list items are added, removed, or reordered.

🎯 In this guide, you’ll learn:

• How to animate elements rendered by v-for
• How <transition-group> works with keys and tags
• CSS transition classes and examples
• Tips to avoid common animation issues

---

📘 What Is <transition-group>?

Vue’s <transition-group> is a wrapper component designed to apply animations when multiple elements are rendered with v-for.

• Uses :key to track items
• Works with entering, leaving, and moving transitions
• Accepts a tag to render (like ul, div, etc.)

---

🧱 Example – Animating a List with Fade & Slide

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item" class="item">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      items: ['Item 1']
    };
  },
  methods: {
    addItem() {
      this.count++;
      this.items.push(`Item ${this.count}`);
    }
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.item {
  background: #eee;
  margin: 8px 0;
  padding: 10px;
  list-style: none;
}
</style>

🧠 When items are added, they fade in and slide up.

---

🔁 Removing Items with Animation

Modify the example to include a remove button:

<li v-for="(item, index) in items" :key="item">
  {{ item }}
  <button @click="items.splice(index, 1)">❌</button>
</li>

✔️ Vue automatically applies leave transition when an item is removed.

---

🔃 Animating Reordered Lists

If you sort the list, Vue also animates the position change of the items.

<button @click="items.reverse()">Reverse List</button>

🔁 This will trigger a move transition using *-move class.

✅ Example:

.list-move {
  transition: transform 0.3s;
}

---

🧬 Using Custom Tags with transition-group

You can wrap your v-for items in any valid tag:

<transition-group name="fade" tag="div">
  <span v-for="tag in tags" :key="tag">{{ tag }}</span>
</transition-group>

---

⚠️ Common Issues

Issue	Cause	Fix
Items not animating	Missing or duplicate :key	Ensure each item has a unique key
Transitions not applied	Class mismatch or incorrect naming	Use correct *-enter-* syntax
Move transitions not firing	CSS transform or position missing	Apply transform or position: relative

---

📌 Summary – Recap & Next Steps

Animating v-for lists in Vue creates visually engaging interfaces with minimal effort. Vue’s <transition-group> component handles most of the complexity, making list additions, deletions, and reordering smooth and stylish.

🔍 Key Takeaways:

• Use <transition-group> for animating v-for rendered elements
• Always use unique :key for each item
• Combine enter, leave, and move classes for full control
• Transitions support both CSS and JS hooks

⚙️ Real-World Relevance:
Used in chat apps, notification lists, sortable tasks, shopping carts, and dashboards.

---

❓ FAQ Section

❓ What is the purpose of <transition-group> in Vue?

✅ It allows animations when multiple items are rendered with v-for.

---

❓ Why do I need a :key for list animations?

✅ Vue uses the key to track which elements changed, so transitions work correctly.

---

❓ Can I animate reordered list items?

✅ Yes, use the .move class with a transform property.

---

❓ Can I use custom tags with transition-group?

✅ Yes. Use the tag attribute to wrap your list items in div, ul, etc.

---

❓ Is <transition-group> required for list transitions?

✅ Yes. Regular <transition> doesn’t support multiple elements.

---

Share Now :