VueJs TransitionGroup

Syntax

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

Example

<template>
  <div class="app">
    <button @click="addItem">Add Item</button>
    <transition-group name="fade" tag="ul">
      <li v-for="item in items" :key="item.id" @click="removeItem(item.id)">
        {{ item.name }}
      </li>
    </transition-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { id: 1, name: 'Item One' },
          { id: 2, name: 'Item Two' },
          { id: 3, name: 'Item Three' }
        ],
        nextId: 4
      };
    },
    methods: {
      addItem() {
        this.items.push({ id: this.nextId++, name: `Item ${this.nextId}` });
      },
      removeItem(id) {
        this.items = this.items.filter(item => item.id !== id);
      }
    }
  };
</script>

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

Output

The output of the above example will be a list of items. A new item can be added by clicking the "Add Item" button, and items can be removed by clicking on them. When an item is added or removed, it will fade in or out of the list.

Explanation

<transition-group> is a VueJS component that allows for the transition of multiple elements simultaneously. When an element is added or removed from the group, it will transition in or out based on the defined CSS classes.

The name property specifies the name of the transition and is used to define the CSS classes that will be applied during the transition. The tag property specifies the tag name of the list container, which defaults to <span>.

The <li> elements within the <transition-group> are mapped using the v-for directive. The :key property is used to track each item in the list and must be bound to a unique identifier.

Use

<transition-group> is commonly used to add visual interest and smooth transitions to lists, tables, and other groupings of elements. It can be used in conjunction with other VueJS components to create complex animations and effects.

Important Points

• v-bind:key is required on each child of <transition-group> component.
• <transition-group> does not render any content itself; it wraps an existing component or HTML element and transitions between its changes.
• The name attribute of <transition-group> should match the CSS transition class prefix.

Summary

<transition-group> is a powerful VueJS component that enables the smooth transitioning of multiple elements simultaneously. By adding a name to the component, CSS classes can be applied during the transitions. The component is well-suited for animating lists, tables, and other groupings of elements. Understanding the syntax and applications for this component can enhance the visual appeal and user experience of your VueJS projects.