What are some examples of using transition groups in Vue?

What are some examples of using transition groups in Vue?

Vue's transition group is used for applying transition effects when items are added or removed from a list. Here are a few examples: 1. Basic List Transition: Wrap a list in a <transition-group> and use CSS classes for enter/leave transitions. 2. Dynamic List: Use v-for with a unique key to animate items as they change. 3. Custom Animation: Create custom animations using JavaScript hooks for more control.

Can you show me a code example for a basic list transition?

Sure! Here's a simple example:

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

What if I want to add a new item to the list?

You can add a new item by updating the items array in your Vue component. For example:

methods: {
  addItem() {
    this.items.push({ id: newId, text: 'New Item' });
  }
}

Are there any performance considerations when using transition groups?

Yes, when using transition groups, it's important to ensure that the list is not too large, as this can lead to performance issues. Use key attributes wisely and consider optimizing animations for smoother transitions.