Swiper Animate使用方法

1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。
2. 初始化时隐藏元素并在需要的时刻开始动画。

//Swiper4.x  初始化
  var mySwiper = new Swiper ('.swiper-container', {
    on:{
      init: function(){
        swiperAnimateCache(this); //隐藏动画元素 
        swiperAnimate(this); //初始化完成开始动画
      }, 
      slideChangeTransitionEnd: function(){ 
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
      } 
    }
  }) 

3. 在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：
   swiper-animate-effect：切换效果，例如 fadeInUp
   swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
   swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

4. 自定义动画效果

<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;
        }

5. 可选效果参考
   tps://daneden.github.io/animate.css/