从左侧滑入最新信息的动画
动画效果
代码实现
父组件,定时器模拟推入消息
<children :infoList='debtBerthWarnList'></children >
setInterval(()=>{
// 这里去掉最后的补充数据
that.debtBerthWarnList.pop();
// 模拟接口数据
let list = [{
warnType: 1,
areaName: '海淀',
parkName: '中街',
berthCode: 'WIERWKJEDFK22333',
plateNumber: '粤SS2222',
plateColor: 0,
violationType: 2,
money: parseInt(Math.random() * 1000)
}];
// 最后加入补充数据,补充数据可以写死定义在data中
list.push({
warnType: 1,
areaName: '海淀',
parkName: '中街',
berthCode: 'WIERWKJEDFK22333',
plateNumber: '粤SS2222',
plateColor: 0,
violationType: 2,
money: 1000
})
// 重新赋值
that.debtBerthWarnList = that.debtBerthWarnList.concat(list)
}, 2000)
ps: 解释一下什么是补充数据,为什么需要它
补充数据页面不展示,是为了让最后一条消息实现滑入到第一张位置的动画效果
子组件
<template>
<div class="infoList">
<div class="infoSwiper">
<div class='info'
v-for="(item, index) in infoList"
:key='item.id'
最新消息从左侧滑入,最后一条是补充数据,所以需要减2
**:style="{transform: `translateX(${ 290 * (infoList.length - index - 2) }px)`}"**>
<div class="contentInfo">
<p>欠费预警</p>
<div>
内容
</div>
</div>
</div>
</div>
</div>
</template>
// 每一个子盒子需要相对于复合组定位
<style scoped lang="stylus">
.infoList {
height: 380px;
overflow hidden;
width 100%;
position relative
.infoSwiper {
width: 100%;
height: 380px;
position: relative;
overflow: hidden;
}
.info {
width: 290px;
height: 380px;
background: #FFFFFF;
border-radius: 4px;
position: absolute;
left: 0px;
top: 0;
z-index: 10
transition: all .8s ease;
.contentInfo {
width: 270px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #E8E8E8;
}
}
</style>