使用Swiper如何製作CSS3動畫效果

這篇文章主要為大家介紹了關於在Swiper內如何製作CSS3動畫效果的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

Swiper 是一款免費以及輕量級的行動裝置觸控滑桿的框架，使用硬體加速過渡（如果該設備支援的話）。主要使用與行動端的網站、網頁應用程式（web apps），以及原生的應用程式（native apps）。主要是為IOS而設計的，同時，在Android、WP8系統以及現代桌面瀏覽器也有著良好的使用者體驗。

本文主要介紹了Swiper內製作CSS3動畫效果的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

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

<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" rel="external nofollow" >

2、接著在頁面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);
   }
  })

3 、在需要執行的動畫的元素上面加上cla​​ss:

  在需要執行動畫的元素上加上cla​​ss ("ani"、"animated") 

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

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

  直接在執行動畫的元素對應的css裡面添加自訂的動畫樣式

  也可以在元素上面配置幾個參數

  swiper-animate-effect：切換效果，例如fadeInUp 

  swiper-animate-duration：可選，動畫持續時間（單位秒），例如0.5s

  swiper-animate-delay：可選，動畫延遲時間（單位秒），例如0.3s

4、下面是案例

#上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在swiper外掛程式中如何實作切換箭頭按鈕

如何使用swiper行動裝置輪播外掛程式

在Vue元件通訊中如何使用Bus

使用Swiper如何實作頁面圖片輪播

在JavaScript中如何實現數值自動增加

使用Swiper如何實作分頁器使用

以上是使用Swiper如何製作CSS3動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！