中文网提供的Swiper Animate小插件由于只能执行一种动画而一直饱受诟病，现有网友进行了改进可以执行两种动画，使用方法稍有改变。
1.下载插件swiper.animate-twice.min.js，加载进页面。
- <!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>
- <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>
4.说明
在每个要动画的类上面添加一个 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)
原文链接：微场景 之 swiper 进场动画和出场动画插件
| 
[复制链接]
发表于 2015-7-2 10:13:28
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
淘帖