Swiper中使用Velocity

参考swiper-animate实现了一个使用js控制动画的小插件，具体内容看readme以下：

Desciption

这是一个swiper的js动画插件，语法参考并相似swiper.animate.js，swiper.animate-twice

Usage

载入jquery.js或者zepto.js和swiper-effect.js

<script src="jquery.js"></script>
<!-- 或者 -->
<script src="zepto.js"></script>
<!-- 若是使用velocity -->
<script src="velocity.js"></script>
<!-- 载入插件 -->
<script src="swiper-effect.js"></script>

添加动画元素
eff是默认的动画类名
data-eff-in和data-eff-out是控制默认的dataset。
dataset支持的语法是<effect>:<args1>,<args2>,... ，表示触发动画时调用effect($effs, args1, args2)，若是没有参数，直接<effect>
而其中的<args>能够是：
数组 -> [1, 2, 3]
字符串 -> asd, 或加上单引号'asd'，默认只会去掉第一层的单引号，好比，'132'd'就是字符串123'd
数字 -> 123456
对象 -> duration=1000;delay=500会被转成{duration: 1000, delay: 5000}

<div class="swiper-slide">
<p class="eff" data-eff-in="velocity:slideDown,duration=1000;delay=500" data-eff-out="velocity:slideUp,duration=1000;delay=500">内容</p>
</div>

添加effect（就是data-eff-in和data-eff-out）调用的函数

// velocity是<effect>的名字，command和opts都是传入的参数
// $effs表示当前slide中全部的动画元素对象
SwiperEffect.addEffect('velocity', function ($effs, command, opts) {
  // 这是velocity.js的1.5版本写法
  // 在这个例子中是：
  // command -> 进入动画是slideUp，推出动画是slideDown
  // opts -> { duration: 1000, delay: 500 }
  $effs.velocity(command, opts)
})

初始化时隐藏元素并在须要的时刻开始动画

//Swiper5
var mySwiper = new Swiper ('.swiper-container', {
  on:{
    init: function(){
      SwiperEffect.swiperEffectCache(this); //缓存swiper.slides
      SwiperEffect.swiperEffect(this); //初始化完成开始动画
    }, 
    slideChangeTransitionEnd: function(){ 
      // 触发动画即调用data-eff-in和data-eff-out表示的函数
      SwiperEffect.swiperEffect(this); //每一个slide切换结束时也运行当前slide动画
      // swiperEffect默认顺序执行in和out动画
      // 若是须要分别控制in和out动画，须要使用swiperEffectIn和swiperEffectOut
    } 
  }
})

能够更改dataset的名字和动画类名

SwiperEffect.setEffectClass('.ani') // => 类名改为ani
SwiperEffect.setEffectDataSetName('slide')
// => dataset改成data-slide-in和data-slide-out

若是有多个Swiper实例，也须要有多个SwiperEffect是实例

var otherSwiperEffect = SwiperEffect.factory()

移除和获取effects，须要注意改变effects会影响到全部SwiperEffect实例

SwiperEffect.getEffects()
SwiperEffect.removeEffect('velocity')