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')