Transiciones de lista asombrosa de Vue.js

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco versátil que proporciona alta velocidad y rendimiento. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa.

Las transiciones de listas escalonadas se pueden realizar en las listas mediante la comunicación entre la transición de JavaScript y los atributos de datos presentes. TransitionGroup se utiliza para realizar las transiciones de lista escalonada. TransitionGroup es el elemento integrado de Vue.js diseñado para animar la inserción, eliminación y cambio de orden de los elementos de la lista.

Clases de transiciones de lista asombrosa para TransitionGroup:

• @before-enter : este evento se activa cuando el elemento no está presente en la lista.
• @enter : este evento se activa cuando el elemento ingresa a la lista.
• @leave : este evento se activa cuando el elemento se elimina de la lista.

Todos los eventos funcionan de forma independiente y, por lo tanto, la transición es asombrosa.

Sintaxis : defina los métodos para la animación en diferentes eventos y luego adjunte las devoluciones de llamada al elemento TransitionGroup de la siguiente manera:

<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>

Ejemplo : en el siguiente ejemplo, tenemos una lista con una barra de búsqueda encima. Cada vez que se ingresa una consulta de búsqueda, la lista se filtra y se realizan las animaciones para la eliminación y el filtrado. 

Primero, hemos instalado el gsap para animaciones de transición. Es una biblioteca para animaciones. Instálalo usando el siguiente comando.

npm i gsap

Y luego, use los siguientes códigos para los respectivos archivos de animación.

<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>

import { createApp } from "vue";
import App from "./App.vue";
  
createApp(App).mount("#app");

Producción:

 

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