1.下載插件swiper.animate-twice.min.js，加載進頁面。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> <link rel="stylesheet" href="path/to/animate.min.css"> </head> <body> ... <script src="path/to/swiper.min.js"></script> <script src="path/to/swiper.animate-twice.min.js"></script> </body> </html>
2.初始化
<script> var mySwiper = new Swiper ('.swiper-container', { onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit swiperAnimateCache(swiper); //隱藏動畫元素 swiperAnimate(swiper); //初始化完成開始動畫 }, onSlideChangeEnd: function(swiper){ swiperAnimate(swiper); //每個slide切換結束時也運行當前slide動畫 } }) </script>
3.在需要動畫的元素上添加代碼
<div class="swiper-slide a"> <div class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">內容1</div> </div>
4.說明
在每個要動畫的類上面添加一個 ani的類名 然后在后面的DATA內 多了兩個參數 data-slide-in 進場動畫和 data-slide-out出場動畫
參數是一致的。
at 500 from bounceInRight use swing during 500
在 多少時間開始 以 什么動畫 使用 什么速度 動畫用時 多少 （force 是否使用 只在出場的時候判斷）
at 后面跟的是 動畫延遲時間
from 后面跟的是 動畫樣式
use 后面跟的是 動畫力度
during 后面跟的是 動畫持續時間
force 后面跟的是 是否使用 只有在出場動畫的時候使用。進場動畫無效。。
出場動畫執行時間 =進場等待時間（at）+進場動畫執行時間（during）+出場等待時間(at)