前言

Swiper 是一款免費(fèi)以及輕量級(jí)的移動(dòng)設(shè)備觸控滑塊的框架，使用硬件加速過渡（如果該設(shè)備支持的話）。主要使用與移動(dòng)端的網(wǎng)站、網(wǎng)頁應(yīng)用程序（web apps），以及原生的應(yīng)用程序（native apps）。主要是為IOS而設(shè)計(jì)的，同時(shí)，在Android、WP8系統(tǒng)以及現(xiàn)代桌面瀏覽器也有著良好的用戶體驗(yàn)。

本文主要給大家介紹了關(guān)于Swiper內(nèi)制作CSS3動(dòng)畫效果的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

1、在需要添加動(dòng)畫的頁面里面引入以下幾個(gè)文件 版本對(duì)應(yīng)

<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部分添加(按業(yè)務(wù)需求)

var mySwiper = new Swiper('.swiper-container',{
   autoplay : 5000,//自動(dòng)切換時(shí)間
   pagination : '.swiper-pagination',
   //pagination : '#swiper-pagination1',
   onInit: function(swiper) {//輪播初始化時(shí)候執(zhí)行動(dòng)畫
    swiperAnimateCache(swiper);
    swiperAnimate(swiper);
   },  
   onSlideChangeEnd: function(swiper) {//輪播切換到最后一張的時(shí)候重新執(zhí)行
    swiperAnimate(swiper);
   }
  })

3、在需要執(zhí)行的動(dòng)畫的元素上面添加class:

  給需要執(zhí)行動(dòng)畫的元素上添加class ("ani"、"animated") 

  然后可以添加animate.css里面提供的一些動(dòng)畫

  如果animate.css里面的動(dòng)畫不能滿足需求 也可以自定義一些動(dòng)畫

  直接在執(zhí)行動(dòng)畫的元素對(duì)應(yīng)的css里面添加自定義的動(dòng)畫樣式

  還可以在元素上面配置一下幾個(gè)參數(shù)

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

  swiper-animate-duration：可選，動(dòng)畫持續(xù)時(shí)間（單位秒），例如 0.5s

  swiper-animate-delay：可選，動(dòng)畫延遲時(shí)間（單位秒），例如 0.3s

4、下面是案例

參考鏈接：http://www.swiper.com.cn/usage/animate/index.html

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。