作者：李大雷

出自：SegmentFault 思否

原文：segmentfault.com/a/1190000023945464

---

前言

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

第一種方法是需要把所有圖片一張張擺好，然后慢慢移動的，

但是我能不能直接不擺就硬移動呢？

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

• 進場動畫就是從最右側到屏幕中央
• 出場動畫是從屏幕中央到左側移出

這樣看起來的效果就是圖片從右邊一直往左移動，但是這個不一樣的地方是，我們每一個元素都有這個進場動畫和離場動畫，我們根本不用關心它是第幾個元素，你只管輪播就是。

如果不用vue呢？

很簡單，我們自己實現一個transtition的效果就好啦，主要做的是以下兩點

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

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來監聽動畫結束，注意這里每次從新添加類的時候需要重新添加監聽器，不然會無法監聽。如果不使用這個方法你可以使用定時器的方式來移除leave-active類。

function hide(el){el.className = el.className.replace(' slide-enter-active','')el.className += ' slide-leave-active'setTimeout(()=>{//動畫結束后清除classel.className = el.className.replace(' slide-leave-active','')el.style.display = 'none'}, ANIMATION_TIME) //這個ANIMATION_TIME為你在css中動畫執行的時間}

那么，動畫怎么寫呢？

.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屬性，這個屬性表示你的元素狀態將保持動畫后的狀態，如果不設置的話，動畫跑完一遍，你的元素本來執行了離開動畫，執行完以后會回來中央位置杵著。這個時候你會問了，上面的代碼不是寫了，動畫執行完就隱藏元素嗎？

如果你使用上面的setTimeout來命令元素執行完動畫后消失，那么可能會有一瞬間的閃爍，因為實際業務中，你的代碼可能比較復雜，setTimeout沒法在那么精準的時間內執行。保險起見，就讓元素保持動畫離開的最后狀態，即translateX(-100%)。此時元素已經在屏幕外了，不用關心它的表現了

輪播邏輯怎么寫？

很簡單，我們進一個新元素的時候同時移除舊元素即可，兩者同時執行進場和離場動畫即可。

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

總結

以上是生活随笔為你收集整理的中奖人js滚动效果_js使用transition效果实现无缝滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。