js中能同时使用matrix和zepto.js animatee吗？

来源：蜘蛛抓取(WebSpider) 时间：2016-12-07 20:19 标签： js animate
编程开发子分类查看: 20442|回复: 31
可以执行两种动画的升级版的Swiper Animate
TA的每日心情擦汗7&天前签到天数: 13 天[LV.3]偶尔看看II主题帖子积分
中文网提供的Swiper Animate小插件由于只能执行一种动画而一直饱受诟病，现有网友进行了改进可以执行两种动画，使用方法稍有改变。
1.下载插件，加载进页面。
&!DOCTYPE html&
&html&
&head&
& & ...
& & &link rel=&stylesheet& href=&path/to/swiper.min.css&&
& & &link rel=&stylesheet& href=&path/to/animate.min.css&&
&/head&
&body&
& & ...
& & &script src=&path/to/swiper.min.js&&&/script&
& & &script src=&path/to/swiper.animate-twice.min.js&&&/script&
&/body&
&/html&复制代码
2.初始化
&script&& && &&&
&&var mySwiper = new Swiper ('.swiper-container', {
&&onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
& & swiperAnimateCache(swiper); //隐藏动画元素
& & swiperAnimate(swiper); //初始化完成开始动画
&&},
&&onSlideChangeEnd: function(swiper){
& & swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
&&}
&&})& && &&&
&&&/script&复制代码3.在需要动画的元素上添加代码
&div class=&swiper-slide a&&
& && && && &&div class=&ani& data-slide-in=&at 500 from bounceInDown use swing during 500& data-slide-out=&at 0 to fadeOutRight use swing during 1500 force&&内容1&/div&
& && &&&&/div&复制代码
在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画参数是一致的。
at& && && &500& && &&&from&&bounceInRight& && && &use& &&&swing& && & during& &&&500在& &多少时间开始& && & 以& && &什么动画& && && &&&使用& & 什么速度& & 动画用时& & 多少&&（force 是否使用 只在出场的时候判断）
at& && &&&后面跟的是& &&&动画延迟时间from& &&&后面跟的是& & 动画样式use& && & 后面跟的是& & 动画力度during& &后面跟的是& & 动画持续时间
force& &&&后面跟的是& & 是否使用 只有在出场动画的时候使用。进场动画无效。。出场动画执行时间 =进场等待时间（at）+进场动画执行时间（during）+出场等待时间(at)
原文链接：
本帖被以下淘专辑推荐:
& |主题: 1, 订阅: 0
& |主题: 1, 订阅: 0
& |主题: 1, 订阅: 0
& |主题: 1, 订阅: 0
& |主题: 1, 订阅: 0
该用户从未签到主题帖子积分
新手上路, 积分 18, 距离下一级还需 32 积分
新手上路, 积分 18, 距离下一级还需 32 积分
用了这个原来的插件就用不了了？
该用户从未签到主题帖子积分
注册会员, 积分 170, 距离下一级还需 30 积分
注册会员, 积分 170, 距离下一级还需 30 积分
用了这个原来的插件就用不了了？
这个应该是覆盖了原来的吧。
该用户从未签到主题帖子积分
注册会员, 积分 77, 距离下一级还需 123 积分
注册会员, 积分 77, 距离下一级还需 123 积分
发现使用了这个以后无法翻到下一页了
该用户从未签到主题帖子积分
注册会员, 积分 53, 距离下一级还需 147 积分
注册会员, 积分 53, 距离下一级还需 147 积分
本帖最后由 encryption 于
20:28 编辑
提几个问题
第4、149行， window.document.documentElement.querySelectorAll(&.ani&)&&如果一个页面对swiper有多次使用，这个地方可能会重复调用
第148行 clearInterval(OutAniTimeout) 应该是clearTimeout(OutAniTimeout)吧
第29行&&声明的nowtimestamp貌似没什么用
第10、19行最好用正则去实现 slide_in.value.split(/\s+/)
第82行没有明白&&如果出现负值怎么办
该用户从未签到主题帖子积分
注册会员, 积分 53, 距离下一级还需 147 积分
注册会员, 积分 53, 距离下一级还需 147 积分
clearTimeout(OutAniTimeout)
该用户从未签到主题帖子积分
新手上路, 积分 32, 距离下一级还需 18 积分
新手上路, 积分 32, 距离下一级还需 18 积分
这个怎么是左右滑动的？能改成上下滑动的吗？
该用户从未签到主题帖子积分
新手上路, 积分 22, 距离下一级还需 28 积分
新手上路, 积分 22, 距离下一级还需 28 积分
这个swiper.animate.min.js怎么用，有教程吗
该用户从未签到主题帖子积分
新手上路, 积分 15, 距离下一级还需 35 积分
新手上路, 积分 15, 距离下一级还需 35 积分
已下载、学习中，感谢分享
该用户从未签到主题帖子积分
注册会员, 积分 56, 距离下一级还需 144 积分
注册会员, 积分 56, 距离下一级还需 144 积分
使用中还有别的问题出现吗
Powered by

我要回帖

更多关于 js animate 的文章

 

随机推荐