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

<!-- Vue <transition-group> 列表的排序过渡案例 -->
<template>
  <div class="page">
    <!--
    flip n 空翻、轻抛
    shuffle vt 洗牌
    -->
    <button @click="shuffle">shuffle</button>
    <transition-group name="flip-list" tag="ul">
      <li v-for="item in items" :key="item">
        {{item}}
      </li>
    </transition-group>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      }
    },
    computed: {},
    methods: {
      shuffle() {
        // _.shuffle() 为lodash.js提供的接口
        // _.shuffle() 会创建一个被打乱值的集合，也就是将数组的顺序打乱后返回
        // 具体教程请参考：https://www.lodashjs.com/docs/lodash.shuffle
        this.items = _.shuffle(this.items);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  /*
  此处必须设置.flip-list-move类，过渡动画效果才能生效
  注意：
  因为Vue使用了一个叫FLIP的简单动画队列
  FLIP官网：https://aerotwist.com/blog/flip-your-animations/
  而使用flip过渡的元素不能设置为display: inline;
  作为替代方案可以设置为display: inline-block;或者放置在display:flex;中

  此处案例li为block元素，所以过渡效果生效，而inline元素则不会生效
  */
  .flip-list-move {
    transition: transform 1s;
  }
</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'