## 结合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> ```