Vue ＜transition-group＞ 中＜table＞列表的排序过渡案例

<!-- Vue <transition-group> 中<table>列表的排序过渡案例-->
<template>
  <div class="page">
    <p>
      <!-- <transition-group>的排序过渡动画对<table>元素也好使 -->
      <button @click="shuffle">shuffle</button>
    </p>

    <table class="table">
      <thead>
      <tr>
        <td>Id</td>
        <td>Name</td>
        <td>age</td>
      </tr>
      </thead>
      <transition-group name="ani" tag="tbody">
        <tr v-for="(item,index) in items" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.txt}}</td>
          <td>{{item.age}}</td>
        </tr>
      </transition-group>

    </table>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        items: [
          {id: 0, txt: 'dog', age: '5'},
          {id: 1, txt: 'cat', age: '3'},
          {id: 2, txt: 'apple', age: '7'},
        ]
      }
    },
    computed: {},
    methods: {
      shuffle() {
        this.items = _.shuffle(this.items);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .table {
    border: 1px solid #ddd;

    td {
      border: 1px solid #ddd;
      padding: 8px;
    }
  }

  .ani-move {
    transition: transform 0.5s;
  }

</style>

/*
* 在main.js中全局引入lodash.min.js
* https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js
* lodash.js是一个JavaScript实用工具库
* lodash.js遵循MIT开源协议发布
* lodash.js中文文档：https://www.lodashjs.com/
* */
import '@/assets/js/lodash.min.js'