可以执行两种动画的升级版的Swiper Animate
中文网提供的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>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>
4.说明
在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画参数是一致的。
at 500 frombounceInRight use swing during 500在 多少时间开始 以 什么动画 使用 什么速度 动画用时 多少（force 是否使用 只在出场的时候判断）
at 后面跟的是 动画延迟时间from 后面跟的是 动画样式use 后面跟的是 动画力度during 后面跟的是 动画持续时间
force 后面跟的是 是否使用 只有在出场动画的时候使用。进场动画无效。。出场动画执行时间 =进场等待时间（at）+进场动画执行时间（during）+出场等待时间(at)
原文链接：微场景 之 swiper 进场动画和出场动画插件
用了这个原来的插件就用不了了？ 哈根达斯01 发表于 2015-7-5 15:36
用了这个原来的插件就用不了了？
这个应该是覆盖了原来的吧。 发现使用了这个以后无法翻到下一页了
本帖最后由 encryption 于 2015-11-30 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行没有明白如果出现负值怎么办 clearTimeout(OutAniTimeout) 这个怎么是左右滑动的？能改成上下滑动的吗？ 这个swiper.animate.min.js怎么用，有教程吗 已下载、学习中，感谢分享 使用中还有别的问题出现吗