vue消息无缝滚动

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
　　width: 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;

 

转载于:https://www.cnblogs.com/CMing/p/9817228.html