Vue中transition的shuffle属性实现随机排序动画

动画不仅可以实现单列过渡，多维网格也[同样可以过渡]
1、安装lodash
通过 npm

$ npm i -g npm
$ npm i --save lodash

2、vue文件引入

import _ from 'lodash'

3、整体示例代码

<!--  -->
<template>
 <div id="list-complete-demo" class="demo">
   <button v-on:click="shuffle">Shuffle</button>
   <button v-on:click="add">Add</button>
   <button v-on:click="remove">Remove</button>
   <transition-group name="list-complete" tag="p">
     <span v-for="item in items" v-bind:key="item" class="list-complete-item">{{ item }}</span>
   </transition-group>
 </div>
</template>

<script>
import _ from 'lodash'
export default {
 name: "shuffle",
 data() {
   //这里存放数据
   return {
     items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
     nextNum: 10,
   };
 },
 methods: {
   randomIndex: function () {
     return Math.floor(Math.random() * this.items.length);
   },
   add: function () {
     this.items.splice(this.randomIndex(), 0, this.nextNum++);
   },
   remove: function () {
     this.items.splice(this.randomIndex(), 1);
   },
   shuffle: function () {
     this.items = _.shuffle(this.items);
   },
 },
 //生命周期 - 创建完成（可以访问当前this实例）
 created() {},
 //生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {},
};
</script>
<style scoped>
.list-complete-item {
 transition: all 1s;
 display: inline-block;
 margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
           /* .list-complete-leave-active for below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}
.list-complete-leave-active {
 position: absolute;
}
</style>

前端展示：