Swiper Animate使用方法

qq_23944441發表於2018-04-02

官網：http://www.swiper.com.cn

Swiper Animate是Swiper中文網提供的用於在Swiper內快速製作CSS3動畫效果的小外掛，適用於Swiper2.x、Swiper3.x和Swiper4.x 。

此外掛不適用於loop模式

1. 使用Swiper Animate需要先載入swiper.animate.min.js和animate.min.css。
<!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.min.js"></script>
</body>
</html>

2. 初始化時隱藏元素並在需要的時刻開始動畫。
<script> 
//Swiper4.x  初始化Swiper：最好是挨著</body>標籤
  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>
</body>

3. 在需要運動的元素上面增加類名  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>


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/


如果以上這些效果不能滿足你的需求，你可以仿照animate.css的格式製作一些其他效果，加到你自己的css檔案。其他引數：transition-timing-function 。

網友貢獻：可以執行兩種動畫的swiper.animate-twice和可在loop模式下使用的 animateControl。

相關文章