js使用transition效果實(shí)現(xiàn)無縫滾動(dòng)

作者：李大雷

來源：SegmentFault 思否社區(qū)

前言

無縫輪播一直是面試的熱門題目，而大部分答案都是復(fù)制第一張到最后。誠然，這種方法是非常標(biāo)準(zhǔn)，那么有沒有另類一點(diǎn)的方法呢？

第一種方法是需要把所有圖片一張張擺好，然后慢慢移動(dòng)的，但是我能不能直接不擺就硬移動(dòng)呢？

如果你使用過vue的transition，我們是可以通過給每一張圖片來添加入場(chǎng)動(dòng)畫和離場(chǎng)動(dòng)畫來模擬這個(gè)移動(dòng)

• 進(jìn)場(chǎng)動(dòng)畫就是從最右側(cè)到屏幕中央
• 出場(chǎng)動(dòng)畫是從屏幕中央到左側(cè)移出

這樣看起來的效果就是圖片從右邊一直往左移動(dòng)，但是這個(gè)不一樣的地方是，我們每一個(gè)元素都有這個(gè)進(jìn)場(chǎng)動(dòng)畫和離場(chǎng)動(dòng)畫，我們根本不用關(guān)心它是第幾個(gè)元素，你只管輪播就是。

如果不用vue呢？

很簡(jiǎn)單，我們自己實(shí)現(xiàn)一個(gè)transtition的效果就好啦，主要做的是以下兩點(diǎn)

• 元素顯示的時(shí)候，即display屬性不為none的時(shí)候，添加xx-enter-active動(dòng)畫
• 元素消失的時(shí)候，先添加動(dòng)畫xx-leave-active,?注意要讓動(dòng)畫播完才消失

function hide(el){     el.className = el.className.replace(' slide-enter-active','')     el.className += ' slide-leave-active'     el.addEventListener('animationend',animationEvent) } function animationEvent(e){     e.target.className = e.target.className.replace(' slide-leave-active','')     e.target.style.display = 'none'    e.target.removeEventListener('animationend',animationEvent) } function show(el){     el.style.display = 'flex'     el.className += ' slide-enter-active' }

這里我們使用了animationend來監(jiān)聽動(dòng)畫結(jié)束，注意這里每次從新添加類的時(shí)候需要重新添加監(jiān)聽器，不然會(huì)無法監(jiān)聽。如果不使用這個(gè)方法你可以使用定時(shí)器的方式來移除leave-active類。

function hide(el){     el.className = el.className.replace(' slide-enter-active','')     el.className += ' slide-leave-active'     setTimeout(()=>{         //動(dòng)畫結(jié)束后清除class         el.className = el.className.replace(' slide-leave-active','')         el.style.display = 'none'     }, ANIMATION_TIME) //這個(gè)ANIMATION_TIME為你在css中動(dòng)畫執(zhí)行的時(shí)間 }

那么，動(dòng)畫怎么寫呢？

.slide-enter-active{     position: absolute;     animation: slideIn ease .5s forwards; } .slide-leave-active{     position: absolute;     animation: slideOut ease .5s forwards; }   @keyframes slideIn {     0%{        transform: translateX(100%);     }     100%{        transform: translateX(0);     } } @keyframes slideOut {     0%{        transform: translateX(0);     }     100%{        transform: translateX(-100%);     } }

需要注意的是這里的 forwards屬性，這個(gè)屬性表示你的元素狀態(tài)將保持動(dòng)畫后的狀態(tài)，如果不設(shè)置的話，動(dòng)畫跑完一遍，你的元素本來執(zhí)行了離開動(dòng)畫，執(zhí)行完以后會(huì)回來中央位置杵著。這個(gè)時(shí)候你會(huì)問了，上面的代碼不是寫了，動(dòng)畫執(zhí)行完就隱藏元素嗎？

如果你使用上面的setTimeout來命令元素執(zhí)行完動(dòng)畫后消失，那么可能會(huì)有一瞬間的閃爍，因?yàn)閷?shí)際業(yè)務(wù)中，你的代碼可能比較復(fù)雜，setTimeout沒法在那么精準(zhǔn)的時(shí)間內(nèi)執(zhí)行。保險(xiǎn)起見，就讓元素保持動(dòng)畫離開的最后狀態(tài)，即translateX(-100%)。此時(shí)元素已經(jīng)在屏幕外了，不用關(guān)心它的表現(xiàn)了

輪播邏輯怎么寫？

很簡(jiǎn)單，我們進(jìn)一個(gè)新元素的時(shí)候同時(shí)移除舊元素即可，兩者同時(shí)執(zhí)行進(jìn)場(chǎng)和離場(chǎng)動(dòng)畫即可。

function autoPlay(){     setTimeout(()=>{         toggleShow(新元素, 舊元素)         this.autoPlay()     },DURATION) //DURATION為動(dòng)畫間隔時(shí)間 } function toggleShow(newE,oldE){     //舊ele和新ele同時(shí)動(dòng)畫     hide(oldE)     show(newE) }

完整代碼

簡(jiǎn)單的無縫輪播：https://github.com/leedalei/seamlessCarousel