【前言】
前面我们介绍了Swiper的基本用法,现在总结下动画效果Swiper Animate的用法
【简介】
Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件,适用于Swiper2.x、Swiper3.x和Swiper4.x
注意:此插件不适用于loop模式(循环模式)
【列表】
(1)引入文件;
(2)添加类名和参数;
(3)JS添加函数,控制初始化时隐藏元素并在需要的时刻开始动画
【详解】
(1)引入文件
CSS文件:使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css
JS:引入动画脚本文件swiper.animate.min.js
<link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/animate.min.css"> <script src="js/swiper.min.js"></script> <script src="js/swiper.animate.min.js"></script>
(2)添加类名和参数
在需要运动的元素上面增加类名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>
(3)JS添加函数功能,控制初始化时隐藏元素并在需要的时刻开始动画
<script> //Swiper4.x var mySwiper = new Swiper ('.swiper-container', { on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 } } }) //Swiper3.x、Swiper2.x var mySwiper = new Swiper ('.swiper-container', { onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit swiperAnimateCache(swiper); //隐藏动画元素 swiperAnimate(swiper); //初始化完成开始动画 }, onSlideChangeEnd: function(swiper){ swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画 } }) </script>
.