zoukankan      html  css  js  c++  java
  • swiper.animate--css3翻页动画

    基于swiper 的 animate动画,适用于Swiper2.x和Swiper3.x 。

    1. 使用Swiper Animate需要先加载swiper.animate.min.jsanimate.min.css

    View Code

    2.初始化时隐藏元素并在需要的时刻开始动画。

    <script>        
      var mySwiper = new Swiper ('.swiper-container', {
      onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
      }, 
      onSlideChangeEnd: function(swiper){ 
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
      } 
      })        
      </script>

    3. 在需要运动的元素上面增加类名  ani   ,和其他的类似插件相同,Swiper Animate需要指定几个参数:

    swiper-animate-effect:切换效果,例如 fadeInUp (更多的切换效果可参考如下:https://daneden.github.io/animate.css/)

    swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
    swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s

    <div class="swiper-slide">
      <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
    </div>
  • 相关阅读:
    斯坦福【概率与统计】课程笔记(〇):前言
    斯坦福【概率与统计】课程笔记(二):从EDA开始
    dot
    左移右移
    树莓派系统烧写+网络配置
    windows上面捕获声卡数据
    python1
    继续进销存系统
    base64编码
    DES原理
  • 原文地址:https://www.cnblogs.com/i-douya/p/6725172.html
Copyright © 2011-2022 走看看