js使用transition效果实现无缝滚动

js使⽤transition效果实现⽆缝滚动
作者：李⼤雷
前⾔
⽆缝轮播⼀直是⾯试的热门题⽬，⽽⼤部分答案都是复制第⼀张到最后。

诚然，这种⽅法是⾮常标准，那么有没有另类⼀点的⽅法呢？
第⼀种⽅法是需要把所有图⽚⼀张张摆好，然后慢慢移动的，但是我能不能直接不摆就硬移动呢？
如果你使⽤过vue的transition，我们是可以通过给每⼀张图⽚来添加⼊场动画和离场动画来模拟这个移动
•
进场动画就是从最右侧到屏幕中央
•
出场动画是从屏幕中央到左侧移出
这样看起来的效果就是图⽚从右边⼀直往左移动，但是这个不⼀样的地⽅是，我们每⼀个元素都有这个进场动画和离场动画，我们根本不⽤关⼼它是第⼏个元素，你只管轮播就是。

如果不⽤vue呢？
很简单，我们⾃⼰实现⼀个transtition的效果就好啦，主要做的是以下两点
•
元素显⽰的时候，即display属性不为none的时候，添加xx-enter-active动画
•
元素消失的时候，先添加动画xx-leave-active, 注意要让动画播完才消失
•
•
•
•
•
•
•
•
•
•
•
•
•
•
functionhide( el) { el.className = el.className.replace( ' slide-enter-active', '') el.className += ' slide-leave-active' el.addEventListener( 'animationend',animationEvent) } functionanimationEvent( e) { e.target.className =
e.target.className.replace( ' slide-leave-active', '') e.target.style.display = 'none' e.target.removeEventListener(
'animationend',animationEvent) } functionshow( el) { el.style.display = 'flex' el.className += ' slide-enter-active' }
这⾥我们使⽤了animationend来监听动画结束，注意这⾥每次从新添加类的时候需要重新添加监听器，不然会⽆法监听。

如果不使⽤这个⽅法你可以使⽤定时器的⽅式来移除leave-active类。

•
•
•
•
•
functionhide( el) { el.className = el.className.replace( ' slide-enter-active', '') el.className += ' slide-leave-active' setTimeout( => { //动画结束后清除class el.className = el.className.replace( ' slide-leave-active', '') el.style.display = 'none' }, ANIMATION_TIME) //这个ANIMATION_TIME为你在css中动画执⾏的时间 }
那么，动画怎么写呢？
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
.slide-enter-active{ position: absolute; animation: slideIn ease . 5sforwards; } .slide-leave-active{ position: absolute; animation: slideOut ease . 5sforwards; } @ keyframesslideIn { 0%{ transform: translateX(100%); } 100%{ transform: translateX(0); } } @ keyframesslideOut { 0%{ transform: translateX(0); } 100%{ transform: translateX(-100%); } }
需要注意的是这⾥的 forwards属性，这个属性表⽰你的元素状态将保持动画后的状态，如果不设置的话，动画跑完⼀遍，你的元素本来执⾏了离开动画，执⾏完以后会回来中央位置杵着。

这个时候你会问了，上⾯的代码不是写了，动画执⾏完就隐藏元素吗？
如果你使⽤上⾯的setTimeout来命令元素执⾏完动画后消失，那么可能会有⼀瞬间的闪烁，因为实际业务中，你的代码可能⽐较复杂，setTimeout没法在那么精准的时间内执⾏。

保险起见，就让元素保持动画离开的最后状态，即translateX(-100%)。

此时元素已经在屏幕外了，不⽤关⼼它的表现了
轮播逻辑怎么写？
很简单，我们进⼀个新元素的时候同时移除旧元素即可，两者同时执⾏进场和离场动画即可。

•
•
•
•
•
•
•
functionautoPlay( ) { setTimeout( => { toggleShow(新元素, 旧元素) this.autoPlay },DURATION) //DURATION为动画间隔时间 } functiontoggleShow( newE,oldE) { //旧ele和新ele同时动画 hide(oldE) show(newE) }
完整代码。