Open In App

Vue.js List Move Transitions

Improve
Improve
Like Article
Like
Save
Share
Report

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 Vue.js List Move Transitions smooths the transition when an element is added or removed from the list. In entering and leaving transition, by default, the list jumps to the new position. Using this transition we can ensure that when an item moves in the list, it does so smoothly.

Vue.js List Move Transitions Classes: The following are the classes for the move transitions.

  • v-move: This is called when the item is moving.
  • v-list-active: This is called when the list is moving.

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-move{
    },
    .list-enter-active{
    },
    .list-leave-active {
    }
    .list-enter-from{
    },
    .list-leave-to {
    }
</style>

Example: In the following example, the list moves smoothly upwards and downwards whenever an item is removed or added to the list.

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.

 

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 Move 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-move,
    .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);
    }
  
    .list-leave-active {
        position: absolute;
    }
</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#move-transitions



Last Updated : 21 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads