Vue.js Staggering List 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.

Staggering List Transitions can be performed in the lists by communicating between the javascript transition and data attributes present. TransitionGroup is used to perform the staggering list transitions. TransitionGroup is the built-in element of the Vue.js designed for animating the insertion, deletion, and order change of the elements in the list.

Staggering List Transitions classes for TransitionGroup:

• @before-enter: This event is triggered when the element is not present in the list.
• @enter: This event is triggered when the element enters the list.
• @leave: This event is triggered when the element is removed from the list.

All the events work independently and hence the transition is staggering.

Syntax: Define the methods for animation on different events and then attach the callbacks to the TransitionGroup element as follows:

<TransitionGroup
 tag="ul"
 @before-enter="onBeforeEnter"
 @enter="onEnter"
 @leave="onLeave">
 <li
   v-for="(item, index) in computedList"
   :key="item.tutorial"
   :data-index="index">
    {{ item.tutorial }}
 </li>
</TransitionGroup>

Example: In the following example, we have a list with a search bar above it. Whenever a search query is entered, the list is filtered and the animations for removal and filtering are performed. 

First, we have installed the gsap for transition animations. It is a library for animations. Install it using the following command.

npm i gsap

And then, use the following codes for the respective files for animation.

App.vue

<script>
import gsap from "gsap";
export default {
  data() {
    return {
      tutorials: [
        "Data Structures",
        "Competitive Programming",
        "Machine Learning",
        "Java",
        "Interview preparation",],
        search: "",};
  },
  computed: {
    newList() {
      return this.tutorials.filter((object) =>
        object.toLowerCase().includes(this.search)
      );
    },
  },
  methods: {
    onBeforeEnter(element) {
      element.style.height = 0;
      element.style.opacity = 0;
    },
    onEnter(element, done) {
      gsap.to(element, {
        fontSize: "1em",
        height: "1.6em",
        opacity: 1,
        onComplete: done,
      });
    },
    onLeave(element, done) {
      gsap.to(element, {
        opacity: 0,
        onComplete: done,
      });
    },
  },
};
</script>

<template>
  <center>
    <h1 style="text-align: center;
        color: green">GeeksforGeeks
    </h1>
    <strong>
        Vue.js Staggering List Transitions
    </strong>
    <br />
    <input v-model="search"
           placeholder="Search tutorials"
           type="text" />
  </center>
  <div style="margin-left: auto;
                margin-right: auto;
                width: 40vw">
    <TransitionGroup
      tag="ul"
      style="list-style-type: none"
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @leave="onLeave">
      <li
        v-for="(object, item_index) in newList"
        :key="object"
        :data-index="item_index"
        style="height: 1.6em">
            {{ object }}
      </li>
    </TransitionGroup>
  </div>
</template>

main.js

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

Output:

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