欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

js使用transition效果實現(xiàn)無縫滾動

2020-9-7 seo達(dá)人

前言

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

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

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

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

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

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

如果不用vue呢？

很簡單，我們自己實現(xiàn)一個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來監(jiān)聽動畫結(jié)束，注意這里每次從新添加類的時候需要重新添加監(jiān)聽器，不然會無法監(jiān)聽。如果不使用這個方法你可以使用定時器的方式來移除leave-active類。

 function hide(el){
     el.className = el.className.replace(' slide-enter-active','') 

     el.className += ' slide-leave-active' setTimeout(()=>



    { //動畫結(jié)束后清除class el.className = el.className.replace(' slide-leave-active','')

 el.style.display = 'none' }, ANIMATION_TIME) //這個ANIMATION_TIME為你在css中動畫執(zhí)行的時間 }

那么，動畫怎么寫呢？

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

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

輪播邏輯怎么寫？

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

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