黑帽SEO:想要实现无缝滚动,你可以通过js使用transition效果来实现

黑帽SEO:想要实现无缝滚动,你可以通过js使用transition效果来实现  第1张

无缝轮播一直是大家在讨论的热门话题,而大部分答案都是复制第一张到最后。诚然,这种方法是非常标准,那么有没有另类一点的方法呢?第一种方法是需要把所有图片一张张摆好,然后慢慢移动的,但是我们能不能直接不摆就硬移动呢?当然,使用vue的transition给每一张图片来添加入场动画和离场动画来模拟这个移动也可以实现。

●进场动画就是从最右侧到屏幕中央

●出场动画是从屏幕中央到左侧移出

这样看起来的效果就是图片从右边一直往左移动,但是这个不一样的地方是,我们每一个元素都有这个进场动画和离场动画,我们根本不用关心它是第几个元素,你只管轮播就是。

但是,如果不用vue呢,如何能实现这个效果?今天SEOKE就来为您解答js使用transition效果实现无缝滚动,赶紧来看看吧。

如果不用vue?


想要实现无缝滚动,很简单,我们自己实现一个transtition的效果就可以,主要做的是以下两点

●元素显示的时候,即display属性不为none的时候,添加xx-enter-active动画

●元素消失的时候,先添加动画xx-leave-active, 注意要让动画播完才消失

黑帽SEO:想要实现无缝滚动,你可以通过js使用transition效果来实现  第2张

想要实现无缝滚动,这里我们使用了animationend来监听动画结束,注意这里每次从新添加类的时候需要重新添加监听器,不然会无法监听。如果不使用这个方法你可以使用定时器的方式来移除leave-active类。

那么,动画怎么写呢?


黑帽SEO:想要实现无缝滚动,你可以通过js使用transition效果来实现  第3张

想要实现无缝滚动,需要注意的是这里的 forwards属性,这个属性表示你的元素状态将保持动画后的状态,如果不设置的话,动画跑完一遍,你的元素本来执行了离开动画,执行完以后会回来中央位置杵着。这个时候你会问了,上面的代码不是写了,动画执行完就隐藏元素吗?

如果你使用上面的setTimeout来命令元素执行完动画后消失,那么可能会有一瞬间的闪烁,因为实际业务中,你的代码可能比较复杂,setTimeout没法在那么精准的时间内执行。保险起见,就让元素保持动画离开的最后状态,即translateX(-100%)。此时元素已经在屏幕外了,不用关心它的表现了

轮播逻辑怎么写?


很简单,我们进一个新元素的时候同时移除旧元素即可,两者同时执行进场和离场动画即可。

黑帽SEO:想要实现无缝滚动,你可以通过js使用transition效果来实现  第4张




本文由站长原创或收集,不代表本站立场,如若转载,请注明出处:https://www.dalenseo.com/peixun/176.html

本文 暂无 评论

回复给

欢迎点评

联系我们

站长QQ:11890407

站长邮件:11890407@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code