如何在Swiper內製作CSS3動畫效果

以下內容參考連結

• 在需要新增動畫的頁面裡面引入以下幾個檔案 版本對應

<script src="../js/swiper.min.js"></script>
<script src="../js/swiper.animate.min.js"></script>
//**這裡引入jquery或者zepto.js都可以**//
<script src="../js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="../css/animate.min.css">複製程式碼

• 接著在頁面js部分新增(按業務需求)

var mySwiper = new Swiper('.swiper-container',{
          autoplay : 5000,//自動切換時間
          pagination : '.swiper-pagination',
          //pagination : '#swiper-pagination1',
          onInit: function(swiper) {//輪播初始化時候執行動畫
              swiperAnimateCache(swiper);
              swiperAnimate(swiper);
          },        
          onSlideChangeEnd: function(swiper) {//輪播切換到最後一張的時候重新執行
              swiperAnimate(swiper);
          }
      })複製程式碼

• 在需要執行的動畫的元素上面新增class:

  給需要執行動畫的元素上新增class ("ani"、"animated")  

  然後可以新增animate.css裡面提供的一些動畫

  如果animate.css裡面的動畫不能滿足需求 也可以自定義一些動畫

  直接在執行動畫的元素對應的css裡面新增自定義的動畫樣式

  還可以在元素上面配置一下幾個引數

  swiper-animate-effect：切換效果，例如 fadeInUp 
  swiper-animate-duration：可選，動畫持續時間（單位秒），例如 0.5s
  swiper-animate-delay：可選，動畫延遲時間（單位秒），例如 0.3s複製程式碼

• 下面是案例