一个常见的文字无缝滚动效果
基本结构：
<div class="container">
<div class="marquee-wrap">
<ul class="marquee-list" :class="{'animate-up':animateUp}">
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
</div>
--------------------------------------------------------------------------------------------
：css：
.marquee-wrap {
width: 80%;
height: 40px;
background: rgba(0, 0, 0, 0.2);
margin: 0 auto;
overflow: hidden;
}
.marquee-wrap li {
width: 100%;
height: 100%;
padding: 0 20px;
list-style: none;
line-height: 40px;
text-align: center;
color: #fff;
}
.animate-up {
transition: all 0.5s ease-in-out;
transform: translateY(-40px);
}
----------------------------------------------------------------------
mounted() {
setInterval(this.scrollAnimate, 2000)
},
methods: {
scrollAnimate() {
this.animateUp = true;
setTimeout(() => {
this.arr.push(this.arr[0])
this.arr.shift()
this.animateUp = false
}, 500);
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
},
}
---------------------------完整代码示例-------------------------------