Swiper Animate用法详解

【前言】

前面我们介绍了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>

Swiper Animate用法详解

猜你喜欢