使用transition实现图片轮播效果

前言

无缝轮播一直是面试的热门题目，而大部分答案都是复制第一张到最后。诚然，这种方法是非常标准，那么有没有另类一点的方法呢？

第一种方法是需要把所有图片一张张摆好，然后慢慢移动的，

但是我能不能直接不摆就硬移动呢？

如果你使用过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)}

感谢阅读

博主在此给大家安利一款分享学习资料的app，此app的主要就是收集了互联网上的各种学习资料做整合并免费分享。里面涵盖了Android、java、python、数据结构、算法、前端、爬虫、大数据、深度学习、UI等等技术，包含M课网课程、某课堂VIP课程、各培训机构课程、某鱼的一些付费课程以及算法面试资料，并且正在不断更新中，你想要的学习资料几乎都有，当然你也可以加入我们的技术Q群获取各种资料：687667883，任何课程问题可直接咨询群主。
目前对接的课程论坛如下，您可以提前了解下有哪些课程：
链接资源如下（下面论坛所有的课程，app中均有并且是免费的，如果出现未录入的情况，加上面的Q群找群主）：
享学app资源对接论坛一（IT码上发）
享学app资源对接论坛二（学途无忧）

目前app已经上架小米应用市场，可搜索“享学”即可下载，其他市场正在同步上架中，同时你也可扫码以下二维码进行下载：