先看效果图
<template>
<div id="app">
<div id="demo">
<ul class="list">
<li
v-for="(item, index) in list"
:key="item.id"
:class="!index && move ? 'toUp' : ''"
>
{
{ item.msg }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
list: [
{ msg: '**已提现奖金50元' },
{ msg: '**已获奖金60元' },
{ msg: '**已提现奖金80元' },
{ msg: '**已获奖金40元' },
{ msg: '**已提现奖金20元' },
{ msg: '**成功邀请1人 已获奖金5元' },
{ msg: '**已提现奖金230元' },
{ msg: '**成功邀请3人 已获奖金25元' },
{ msg: '**已提现奖金550元' },
{ msg: '****成功邀请7人 已获奖金777元' }
],
move: false
};
},
mounted() {
setInterval(this.startMove, 2000)
},
methods: {
startMove() {
this.move = true //开始播放
setTimeout(() => {
this.list.push(this.list[0]) //将第一条数据塞到最后一个
this.list.shift() //删除第一条数据
this.move = false //暂停播放,此处修改,保证每一次都会有动画显示
}, 500)
}
},
};
</script>
style
<style scoped>
#demo{
margin: 20px auto;
width: 200px;
}
.toUp {
margin-top: -40px;
transition: all 0.5s;
}
.list {
list-style: none;
width: 250px;
border: 1px solid #ccc;
text-align: center;
overflow: hidden;
height: 40px;
padding: 0;
margin: 0;
}
li {
text-align: left;
height: 40px;
line-height: 40px;
}
</style>