如何在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複製代碼

• 下面是案例