Vue.js 交错列表转换

Vue.js是一个用于开发 Web 用户界面的渐进式 JavaScript 框架。它是一个提供高速和高性能的多功能框架。我们可以创建单页应用程序以及全栈应用程序。

通过在 javascript 转换和存在的数据属性之间进行通信，可以在列表中执行交错列表转换。 TransitionGroup用于执行交错列表转换。 TransitionGroup 是 Vue.js 的内置元素，设计用于动画列表中元素的插入、删除和顺序更改。

TransitionGroup 的交错列表转换类：

• @before-enter ：当元素不在列表中时触发此事件。
• @enter ：当元素进入列表时触发此事件。
• @leave ：从列表中删除元素时触发此事件。

所有事件都独立工作，因此过渡是惊人的。

语法：定义不同事件的动画方法，然后将回调附加到 TransitionGroup 元素，如下所示：

 

    {{ item.tutorial }}
 

示例：在下面的示例中，我们有一个列表，上面有一个搜索栏。每当输入搜索查询时，都会过滤列表并执行删除和过滤的动画。

首先，我们为过渡动画安装了gsap 。它是一个动画库。使用以下命令安装它。

npm i gsap

然后，对动画的各个文件使用以下代码。

App.vue

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,
      });
    },
  },
};

  

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