前言

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

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

1、在需要添加動畫的頁面里面引入以下幾個文件 版本對應(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,//自動切換時間
 pagination : '.swiper-pagination',
 //pagination : '#swiper-pagination1',
 onInit: function(swiper) {//輪播初始化時候執(zhí)行動畫
 swiperAnimateCache(swiper);
 swiperAnimate(swiper);
 }, 
 onSlideChangeEnd: function(swiper) {//輪播切換到最后一張的時候重新執(zhí)行
 swiperAnimate(swiper);
 }
 })

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

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

然后可以添加animate.css里面提供的一些動畫

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

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

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

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

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

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

4、下面是案例

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

相關(guān)文章：

在swiper插件中如何實現(xiàn)切換箭頭按鈕

如何使用swiper移動端輪播插件

在Vue組件通信中如何使用Bus

使用Swiper如何實現(xiàn)頁面圖片輪播

在JavaScript中如何實現(xiàn)數(shù)值自動增加

使用Swiper如何實現(xiàn)分頁器使用

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com