## 結合animate.css 的效果 **需要引入animate.css和swiper.animate.min.js** ### 1。1步驟 一。引入animate.css和swiper.animate.min.js 二。初始化時隱藏元素并在需要的時刻開始動畫（**添加到swipe的配置項中**） ``` on:{ init: function(){ swiperAnimateCache(this); //隱藏動畫元素 swiperAnimate(this); //初始化完成開始動畫 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每個slide切換結束時也運行當前slide動畫 //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 動畫只展現一次，去除ani類名 } }, ``` 三。 給需要添加視差效果的元素身上添加屬性 在需要運動的元素上面增加類名 **ani**, 然后添加swiper animate 參數： swiper-animate-effect：切換效果，例如 fadeInUp 即animate.css的效果名稱 swiper-animate-duration：動畫持續時間（單位秒），例如 0.5s swiper-animate-delay: 延遲時間（單位秒） ``` <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">第1張</p> ```