Swiper Animate使用方法
程序员文章站
2024-03-25 12:25:46
...
- 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。
- 初始化时隐藏元素并在需要的时刻开始动画。
//Swiper4.x 初始化
var mySwiper = new Swiper ('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})
-
在需要运动的元素上面增加类名 ani ,和其他的类似插件相同,Swiper Animate需要指定几个参数:
swiper-animate-effect:切换效果,例如 fadeInUp
swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s -
自定义动画效果
<img class="ani pic" src="pic.jpg" swiper-animate-effect="shutter2" />
@-webkit-keyframes shutter2 {
from {
top: 100%;
}
to {
top: 0;
}
}
.shutter2 {
-webkit-animation: shutter2 0.5s forwards;
animation: shutter2 0.5s forwards;
}
- 可选效果参考
tps://daneden.github.io/animate.css/
上一篇: swiper,animate使用方法
下一篇: swiper animate