关于swiper和动画的一些体验

本文分享了使用Swiper实现动画过程中的经验,包括如何避免图片卡顿、流畅运用动画及解决循环动画衔接处的问题。

这周花了两天的时间磨一个动画,收获主要有一下几点:

  1. swiper好用,swiper 的 loop 用的时候记得加上 loopAdditionalSlides, 不然手机上移动到循环衔接处的时候图片添加跟不上,会出现卡顿

  2. 动画效果最好别用获取DOM,用js添加动画的方式,这样的动画很卡顿,不流畅,css的动画支持则很好。

    keyframes写出来的动画只是动画,动画播完之后会回到调用该 animation 的 css 属性
    transition 过渡属性则不然,这个比较接近 jQuery animation 的感觉

  3. 当 swiper loop 遇上 transition 动画,这时候在循环衔接处的元素动画会出现闪动

所以当移动元素遇上动画的时候,还是自己用 greensock 的 drag 自己写一个元素拖动吧,自己掌控的感觉还是比较爽,至少有bug知道怎么改 - -。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值