Vue.js Ошеломляющие переходы списка

Опубликовано: 11 Августа, 2022

Vue.js — это прогрессивная среда JavaScript для разработки пользовательских веб-интерфейсов. Это универсальный фреймворк, обеспечивающий высокую скорость и производительность. Мы можем создавать одностраничные приложения, а также приложения полного стека.

Пошаговые переходы по списку могут выполняться в списках путем обмена данными между переходом javascript и присутствующими атрибутами данных. TransitionGroup используется для выполнения чередующихся переходов по списку. TransitionGroup — это встроенный элемент Vue.js, предназначенный для анимации вставки, удаления и изменения порядка элементов в списке.

Классы Staggering List Transitions для TransitionGroup:

@before-enter : это событие запускается, когда элемент отсутствует в списке.
@enter : это событие запускается, когда элемент входит в список.
@leave : это событие запускается, когда элемент удаляется из списка.

Все события работают независимо, поэтому переход ошеломляет.

Синтаксис : определите методы анимации для различных событий, а затем прикрепите обратные вызовы к элементу TransitionGroup следующим образом:

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

Пример . В следующем примере у нас есть список с панелью поиска над ним. Всякий раз, когда вводится поисковый запрос, список фильтруется и выполняются анимации для удаления и фильтрации.

Во-первых, мы установили gsap для анимации перехода. Это библиотека для анимации. Установите его с помощью следующей команды.

npm i gsap

Затем используйте следующие коды для соответствующих файлов для анимации.

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");

Выход:

Ссылка: https://vuejs.org/guide/built-ins/transition-group.html#staggering-list-transitions

JavaScript Picked

Vue.js Ошеломляющие переходы списка

App.vue

main.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ