瀑布流 重组动画

想要通过js原生写，后来知道了vue还有个自带动画 进入/离开 & 列表过渡，看实例 这个可以说非常方便了，且非常符合我这个动画需求

首先需要把初始静态布局写好，一开始是通过position定位后动态给每个标签赋值height，top，left来实现瀑布流布局，用到vue过渡效果时，发现并没有实现重组的动画效果，官网上说

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display:
inline-block 或者放置于 flex 中

，以为是定位导致动画没出现，但后来通过一点一点找原因后发现是js动态赋值height时导致的，后面想了想重写了一下瀑布流方式（flex方式，flex真的是小万能~）

这个重组数组这一块可以使用vue文档里写的lodash插件中shuffle方法（打乱数组并返回），或者你可以自己写 ，eg：

//洗牌算法
for (var i = this.dataList.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random()*(i+1)); 
    //数组随机索引的值和数组第i项互换
    var itemAtIndex = this.dataList[randomIndex]; 
    this.dataList[randomIndex] = this.dataList[i]; 
    this.dataList[i] = itemAtIndex;
    //赋值随机颜色,并给不同border样式
    this.dataList[i].color = this.randomColor[Math.floor(Math.random() * this.randomColor.length)]
}

重写好后，重组是重组了，但是动画效果还是没有！！真是无语了
一溜十三招，一个巨巨巨坑！！key值不能用下标值 或者 随机数！！！
把:key="index"改为:key=“item.ID” 后，嗯 非常完美~

<div style="column-count: 3;column-gap: 0;height: calc(100% - 155px);">
    <transition-group name="cell" tag="div" class="container">
    //这个tag，他好像是外面包裹元素的意思，我这里就写了个div
    //这个key！key！
       <div class="pubuliuitem cell" v-for="item in (dataList)" :key="item.ID" @click="handleShowBRLayer(item)">
           <div style="width: 100%; text-align: center;position: relative; ">
               <div class="colortag"></div>
           </div>
           <div class="contentdiv">
               <div class="contentinnerdiv">
                   <div style="overflow: hidden;line-height: 30px;flex: 1;">
                       <div class="content">
                           <div class="bookname">{{item.BookName}}</div>
                       </div>
                       <div class="publishContent">{{item.PublishContent}}</div>
                   </div>
                   <div class="peodep">
                       <span>{{item.DepartmentName}}</span>
                       <span>{{item.UserName}}</span>
                   </div>
               </div>
           </div>
       </div>
   </transition-group>
</div>

<script>
import _ from "lodash";
shuffle(){
	//一分钟刷新一次
	this.timer = setInterval(() => {
    	this.dataList = _.shuffle(this.dataList);
   	}, 60000)
},
</script>

<style scope>
.cell-move {
  transition: transform 1s;
}
</style>