重点是延时器的使用和transition的效果添加和取消
使用setInterval定时器在定时器函数里面判断，当top值小于arr的长度（因为我实现的是两条数据在一行滚动）在条件范围内实现无缝操作，重点操作setTimeout延时器的使用，是为了当操作字幕瞬间到达第一条后过渡属性不会因此覆盖top为0的过渡效果，而延时后加上transition的为了实现第一条字幕top过渡到第二条
if (top <= - num) {
top = 0
cg_autopaly.style.transition = ''
cg_autopaly.style.top = top + 'px'
setTimeout(() => {
top = -20
cg_autopaly.style.transition = 'all 0.5s'
cg_autopaly.style.top = top + 'px'
}, 100);
} else {
top -= 20
cg_autopaly.style.transition = 'all 0.5s'
cg_autopaly.style.top = top + 'px'
}
在
js代码
sjAutoPlay (arr) {
let cg_autopaly = document.getElementsByClassName('cg_autopaly')[0]
let top = 0
let num = Math.ceil(arr.length/2) * 20
// console.log(top)
this.times = setInterval(function () {
// console.log(top)
if (top <= - num) {
top = 0
cg_autopaly.style.transition = ''
cg_autopaly.style.top = top + 'px'
setTimeout(() => {
top = -20
cg_autopaly.style.transition = 'all 0.5s'
cg_autopaly.style.top = top + 'px'
}, 100);
} else {
top -= 20
cg_autopaly.style.transition = 'all 0.5s'
cg_autopaly.style.top = top + 'px'
}
}, 2000)
},
HTML代码
<div class="cg_new_allinfo">
<div class="cg_autopaly">
<p v-for="(item, index) in setAllMonthList" :key="index">
<span v-for="(items, index) in item" :key="index">
{{items.staff_name}}本月已完成任务任務{{items.month_count}}個；
</span>
</p>
</div>
</div>
