How can I use transition groups in Vue.js?

How can I use transition groups in Vue.js?

You can use the <transition-group> component in Vue.js to animate lists of items. It allows for smooth transitions when items are added, removed, or reordered.

Can you show me a simple code example?

Sure! Here's a basic example:

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
      ],
    };
  },
};
</script>

What CSS styles do I need for the fade effect?

You can add the following CSS:

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

Can I customize the transition effects?

Yes, you can customize the transition effects by modifying the CSS classes and properties to achieve the desired animations.