在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、在需要執行的動畫的元素上面添加class:

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

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

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

  直接在執行動畫的元素對應的css里面添加自定義的動畫樣式

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

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

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

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

4、下面是案例

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

總結

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