可以执行两种动画的升级版的Swiper Animate

admin · 发表于 2015-7-2 10:13:28

中文网提供的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 from bounceInRight use swing during 500

在多少时间开始以什么动画使用什么速度动画用时多少（force 是否使用只在出场的时候判断）

at 后面跟的是动画延迟时间

from 后面跟的是动画样式

use 后面跟的是动画力度

during 后面跟的是动画持续时间

force 后面跟的是是否使用只有在出场动画的时候使用。进场动画无效。。

出场动画执行时间 =进场等待时间（at）+进场动画执行时间（during）+出场等待时间(at)

原文链接：微场景之 swiper 进场动画和出场动画插件

哈根达斯01 · 发表于 2015-7-5 15:36:11

用了这个原来的插件就用不了了？

truexu0529 · 发表于 2015-7-7 10:09:35

哈根达斯01 发表于 2015-7-5 15:36
用了这个原来的插件就用不了了？

这个应该是覆盖了原来的吧。

yunlu · 发表于 2015-9-5 14:05:31

发现使用了这个以后无法翻到下一页了

encryption · 发表于 2015-11-30 20:16:46

本帖最后由 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行没有明白  如果出现负值怎么办

encryption · 发表于 2015-11-30 20:18:04

clearTimeout(OutAniTimeout)

dushilang · 发表于 2016-1-5 11:49:32

这个怎么是左右滑动的？能改成上下滑动的吗？

忆影 · 发表于 2016-1-6 11:43:37

这个swiper.animate.min.js怎么用，有教程吗

Waney · 发表于 2016-1-24 18:59:58

已下载、学习中，感谢分享

myfrancisco · 发表于 2016-2-12 23:40:01

使用中还有别的问题出现吗

可以执行两种动画的升级版的Swiper Animate

本帖被以下淘专辑推荐: