Vue.js List Entering & Leaving Transitions

Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance.  We can create Single Page Applications as well as Full Stack applications.

The Entering and Leaving Transitions are used to perform the animation on lists, whether ordered or unordered lists. The animations can be applied to items entering or leaving the list. The TransitionGroup is the element used to perform animations of list items in Vue.js.

Vue.js List Entering and Leaving Transitions Classes: The following are the classes for the transition when leaving or entering a list:

• list-enter-active: This class is used when an element is entering the list.
• list-leave-active: This class is used when an element is leaving the list.
• list-enter-from: This class is used when an element enters the list.
• list-leave-to: This class is used when an element leaves the list.

In place of the name list, we use the name of transition like mylist or something else.

Syntax: Name the transition for the element in the TransitionGroup and write the transition classes in the style section.

<TransitionGroup tag="ul" name="list">
    ...
</TransitionGroup>
...
<style>
    /*CSS Classes*/
    .list-enter-active{
    },
    .list-leave-active {
    }
    .list-enter-from{
    },
    .list-leave-to {
    }
</style>

Example: In the following example, we have an input element to add the text from the input element to the list of tutorials defined with some data. We can also remove each item individually.

Step 1: Create a new Vue.js project using the npm node.js package manager.

npm init vue@latest

Enter the project name and preset the project as follows:

Project Structure: After successful installation, the following project structure will be formed.

Project Structure

Step 2: Inside the App.vue file, add the data member input and tutorials data. Declare the functions addTutorial and remove to add and remove data from the list.

App.vue

<script>
  export default {
    data() {
      return {
        tutorials: [
          "Data Structures",
          "Competitive Programming",
          "Interview preparation",
        ],
        add: "",
      };
    },

  methods: {
      addTutorial(e) {
        e.preventDefault();
        this.tutorials.push(this.add);
      },
      remove(tutorial) {
        this.tutorials = this.tutorials.filter((e) => e !== tutorial);
      },
    },
  };
</script>

Step 3: Now, in the template section, add the input element with a button and TransitionGroup with the list items. Declare the name of transition in TransitionGroup.

App.vue

<template>
  <center>
    <h1 style="text-align: center;
               color: green">
               GeeksforGeeks
   </h1>
    <strong>
        Vue.js List Entering & Leaving Transitions
    </strong>
    <br />
  </center>
  <div style="margin: auto;
         width: max-content">
    <form @submit="addTutorial">
      <input v-model="add"
               placeholder="Add tutorials"
               type="text" required />
      <button type="submit">Add</button>
    </form>
    <TransitionGroup tag="ul"
                     style="list-style-type: none"
                     name="list">
      <li v-for="tutorial in tutorials" :key="tutorial"
            style="height: 1.6em">
        <button
          style=
            "background-color: lightcoral;
            color: black;
            font-size: x-small;
            border-radius: 0.5rem;"
          @click="remove(tutorial)">
          Remove
        </button>
        {{ tutorial }}
      </li>
    </TransitionGroup>
  </div>
</template>

Step 4: Now in the style section, we need to add the styles for the list transition entering and leaving.

App.vue

<style>
  .list-enter-active,
  .list-leave-active {
      transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  .list-enter-from,
  .list-leave-to {
      opacity: 0;
      transform: translateX(-2rem);
  }
</style>

Step 5: Run the project using the following command and see the output.

npm run dev

It will run the project on http://localhost:3000/ and the result will be as follows.

Output:

Reference: https://vuejs.org/guide/built-ins/transition-group.html#enter-leave-transitions