＜transition-group＞ ＜table＞列表筛选过渡效果案例

 

 

<!-- <transition-group> <table>列表筛选过渡效果案例 -->
<template>
  <div>
    <p>
      <input v-model="query" type="text"/>
    </p>

    <table class="table">
      <thead>
      <tr>
        <th>Name</th>
        <th>age</th>
      </tr>

      </thead>
      <transition-group
        name="fade"
        :css="false"
        tag="tbody"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
      >
        <tr v-for="(item,index) in computedItems" :key="item.txt" :data-index="index">
          <td>{{item.txt}}</td>
          <td>{{item.age}}</td>
        </tr>
      </transition-group>
    </table>
  </div>
</template>

<script>
  export default {
    name: "SayHello",
    data() {
      return {
        query: '',
        items: [
          {txt: 'apple', age: 1},
          {txt: 'apple apple', age: 1},
          {txt: 'banana', age: 2},
          {txt: 'orange', age: 20},
          {txt: 'a big apple', age: 1},
          {txt: 'grape', age: 3},
          {txt: 'watermelon', age: 6},
          {txt: 'strawberry', age: 10},
          {txt: 'tomatoes', age: 7},
        ]
      }
    },
    computed: {
      computedItems() {
        let self = this;
        return this.items.filter((item, index) => {
          return item.txt.toLowerCase().indexOf(self.query.toLowerCase()) !== -1;
        })
      }
    },
    methods: {
      beforeEnter(el){
        el.style.opacity = 0;
        el.style.transform = "translateY('36px')";
      },
      enter(el ,done) {
        var delay = el.dataset.index * 150;
        setTimeout(function () {
          Velocity(el, {opacity: 1, transformY: 0}, {complete: done})
        }, delay);

      },
      beforeLeave(el){
        el.style.opacity = 1;
        el.style.transform = "translateY('0px')";
      },
      leave(el, done){
        var delay = el.dataset.index * 150;
        setTimeout(function () {
          Velocity(el, {opacity: 0, transformY: -36}, {complete: done})
        }, delay);
      }
    }
  }
</script>

<style scoped lang="less">
  .table {
    border: 1px solid #ddd;

    td {
      border: 1px solid #ddd;
      padding: 8px;
    }
  }
</style>

// 在main.js中全局引入velocity.min.js
// Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js
/*
* Velocity中文文档
* http://shouce.jb51.net/velocity/index.html
* */
import '@/assets/js/velocity.min.js'