HTML：
<div class="marquee">
<ul class="nameList" :class="{anim:animate==true}">
<li v-for='(item,index) in marqueeList' :key="index">{{item.name}}</li>
</ul>
</div>
script：
export default {
data() {
return {
animate: false,
marqueeList: [
{name: "抖音"},
{name: "虎牙"},
{name: "淘宝"},
{name: "京东"},
{name: "微博"},
{name: "微信"}
]
};
},
created() {
if (this.marqueeList.length > 2) {
setInterval(this.showMarquee, 2000);
}
},
methods: {
showMarquee() {
this.animate = true;
setTimeout(() => {
this.marqueeList.push(this.marqueeList[0]);
this.marqueeList.shift();
this.animate = false;// 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
}, 1000);
},
}
}
style:
.marquee
300px;
height: 60px;
line-height: 30px;
overflow: hidden;
padding-left: 30px;
border: 1px solid black;
transition: all .5s;
.anim
transition: all 1s;
margin-top: -30px;
.nameList li
list-style: none;
line-height: 30px;
height: 30px;