想要通过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>