Swiper Animate 是 Swiper 中文网提供的用于在 Swiper 内快速制作 CSS3 动画效果的小插件，适用于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x 。
注意 : 此插件不适用于loop模式
如何使用呢, 咱们往接着下看
第一步: 加载 swiper.animate.min.js 和 animate.min.css
<!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.min.js"></script>
</body>
</html>
第二步 : 初始化时隐藏元素并在需要的时刻开始动画
<script>
//Swiper5
var mySwiper = new Swiper ('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
}
}
})
</script>
第三步 : 参数设置
在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp"
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
如果以上这些效果不能满足你的需求，你可以仿照animate.css的格式制作一些其他效果，加到你自己的css文件。其他参数：transition-timing-function 。
# 坑 很大坑 很大很大坑
遇到过个很奇怪的事情, 从官网上下载的 demo 都可以正常运行, 引入方式是标签引用的.
我通过 npm 安装的 swiper , 按照 下载的 demo 仿写, 怎么都不能运行.
原来是有版本的区别, 总结一下:
swiper 3.x 及以下
var mySwiper = new this.$swiper ('.swiper-container', {
direction: 'vertical',
// pagination: '.swiper-pagination',
// virtualTranslate : true,
mousewheelControl : true,
onInit: function(swiper){
...
},
onSlideChangeEnd: function(swiper){
...
},
onTransitionEnd: function(swiper){
..
}
})
swiper 4.x 及以上
var mySwiper = new this.$swiper ('.swiper-container', {
direction: 'vertical',
// pagination: '.swiper-pagination',
// virtualTranslate : true,
mousewheelControl : true,
on:{
Init: function(swiper){
...
},
slideChangeEnd: function(swiper){
...
},
transitionEnd: function(swiper){
...
}
}
})
调用方法不同, 4.x以上, 使用对象的形式调用方法的~
网友评论