vue实现消息向上无缝滚动效果
<ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
<li v-for="item in noticeList">
...
</li>
</ul><script>
export default {
data() {
return {
noticeList: [],
animate:false,
intNum: undefined,
}
},
created: function () {
this.getNoticeData();
},
methods: {
getNoticeData() {
this.$http.get('/news/allList', {
params: {
'pageNumber': 10,
'currentPage': 1
}
}).then(res => {
this.noticeList = res.data.items;
this.ScrollUp();
});
},
ScrollUp() {
this.intNum = setInterval(() => {
this.animate=true;// 向上滚动的时候需要添加css3过渡动画
setTimeout(()=>{
this.noticeList.push(this.noticeList[0]);// 将数组的第一个元素添加到数组的
this.noticeList.shift(); //删除数组的第一个元素
this.animate=false;
},500)
}, 10000);
},
//鼠标移上去停止
Stop() {
clearInterval(this.intNum);
},
Up() {
this.ScrollUp();
},
}
}
</script>样式
.new-list{
line-height: 28px;
transition: top 0.5s;
}
.anim{
transition: all 0.5s;
margin-top: -28px;//高度等于行高
}