快捷導(dǎo)航

在Swiper內(nèi)如何制作CSS3動(dòng)畫效果示例代碼

更新時(shí)間：2017年12月07日 16:55:05 作者：xingyun

這篇文章主要給大家介紹了關(guān)于在Swiper內(nèi)如何制作CSS3動(dòng)畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

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è)文件版本對應(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)畫的元素對應(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、下面是案例