重點(diǎn)是延時(shí)器的使用和transition的效果添加和取消
使用setInterval定時(shí)器在定時(shí)器函數(shù)里面判斷，當(dāng)top值小于arr的長度（因?yàn)槲覍?shí)現(xiàn)的是兩條數(shù)據(jù)在一行滾動(dòng)）在條件范圍內(nèi)實(shí)現(xiàn)無縫操作，重點(diǎn)操作setTimeout延時(shí)器的使用，是為了當(dāng)操作字幕瞬間到達(dá)第一條后過渡屬性不會(huì)因此覆蓋top為0的過渡效果，而延時(shí)后加上transition的為了實(shí)現(xiàn)第一條字幕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}}本月已完成任務(wù)任務(wù){(diào){items.month_count}}個(gè)；
</span>
</p>
</div>
</div>
