# **Swiper+Animate.css** ***** 这个是Swiper提供的视差过渡效果。需要配合Animate.css使用，同时，还必须添加swiper.animate.js 这个JS是对animate.css进行视觉差过渡的支持。 ## 使用方法 ### 1.引入样式和js 在之前的基础上引入animate.css即第一天学的animate.css # 再引入swiper.animate.min.js注意要放置 在swiper.min.js下面。 ``` <link rel="stylesheet" href="css/animate.min.css"> <script src="js/swiper.animate.min.js"></script> ``` 下载:[https://www.swiper.com.cn/usage/animate/index.html](https://www.swiper.com.cn/usage/animate/index.html) ### 2\. 初始化时隐藏元素并在需要的时刻开始动画。 ``` //Swiper4.x var mySwiper = new Swiper ('.swiper-container', { on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名 } } }) ``` ### 3.给需要添加视差效果的元素身上添加属性 在需要运动的元素上面增加类名 **ani**, 然后添加swiper animate 参数： swiper-animate-effect：切换效果，例如 fadeInUp 即animate.css的效果名称 swiper-animate-duration：动画持续时间（单位秒），例如 0.5s # swiper-animate-delay: 延迟时间（单位秒） ``` <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p> </div> ``` :-:  ``` <div class="swiper-slide">//容器改成图片一样宽 <img src="images/1.jpg" width="1100" height="500" alt=""> <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一张</p> </div> <div class="swiper-slide"> <img src="images/2.jpg" alt=""> <p class="ani " swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一张</p> </div> <div class="swiper-slide"> <img src="images/3.jpg" alt=""> <p class="ani " swiper-animate-effect="flipInX" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一张</p> </div> <div class="swiper-slide"> <img src="images/4.jpg" alt=""> <p class="ani " swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一张</p> </div> <div class="swiper-slide"> <img src="images/5.jpg" alt=""> <p class="ani " swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一张</p> </div> <div class="swiper-slide"> <img src="images/6.jpg" alt=""> <p class="ani " swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一张</p> </div> ``` 动画库 [https://www.swiper.com.cn/usage/animate/index.html](https://www.swiper.com.cn/usage/animate/index.html)