Vue.js Ошеломляющие переходы списка
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