<ul>
<transition-group name="indeName">
<li v-for="item in statusList" :key="item.id">
<div style="margin-right:30px;">
<span>1000120</span>
<div class="textgy" >
{{ item.bom_code }}机台{{ item.bom_name }}的{{ item.name}}
</div>
</div>
<div class="timegy">{{ item.endtime.split(' ')[1] }}</div>
</li>
</transition-group>
</ul>
setInterval(() => {
let xx = {
bom_code: '1000120',
bom_id: 120,
bom_name: ++this.numes + '桌椅',
cp_id: 1,
endtime: '2022-01-05 20:30:00',
id: ++this.numes,
name: '电火花',
status: 2
};
this.statusList.unshift(xx);
if (this.statusList.length > 10) {
this.statusList.splice(this.statusList.length - 1, 1);
}
}, 1000);
<style lang='scss'>
ul {
padding: 10px 0;
li {
padding: 0 23px;
height: 34px;
line-height: 34px;
display: flex;
.textgy {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
.timegy {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #666666;
}
}
}
.indeName-enter {
opacity: 0;
transform: translateY(-25px);
}
.indeName-leave-to {
opacity: 0;
}
.indeName-enter-active
{
transition: all 0.6s ease;
}
.indeName-leave-active{
transition: all 0.3s ease;
}
.indeName-move {
transition: all 0.6s ease;
}
.indeName-leave-active {
position: absolute;
}
</style>