查看: 20101|回复: 31

可以执行两种动画的升级版的Swiper Animate

[复制链接]
  • TA的每日心情

    2017-2-10 14:03
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    41

    主题

    229

    帖子

    3395

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    3395
    发表于 2015-7-2 10:13:28 | 显示全部楼层 |阅读模式
    中文网提供的Swiper Animate小插件由于只能执行一种动画而一直饱受诟病,现有网友进行了改进可以执行两种动画,使用方法稍有改变。

    1.下载插件swiper.animate-twice.min.js,加载进页面。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     ...
    5.     <link rel="stylesheet" href="path/to/swiper.min.css">
    6.     <link rel="stylesheet" href="path/to/animate.min.css">
    7. </head>
    8. <body>
    9.     ...
    10.     <script src="path/to/swiper.min.js"></script>
    11.     <script src="path/to/swiper.animate-twice.min.js"></script>
    12. </body>
    13. </html>
    复制代码

    2.初始化
    1. <script>        
    2.   var mySwiper = new Swiper ('.swiper-container', {
    3.   onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    4.     swiperAnimateCache(swiper); //隐藏动画元素
    5.     swiperAnimate(swiper); //初始化完成开始动画
    6.   },
    7.   onSlideChangeEnd: function(swiper){
    8.     swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
    9.   }
    10.   })        
    11.   </script>
    复制代码
    3.在需要动画的元素上添加代码
    1. <div class="swiper-slide a">
    2.             <div class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">内容1</div>
    3.         </div>
    复制代码

    4.说明

      在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画
      参数是一致的。

      at         500        from  bounceInRight         use     swing       during     500
      在   多少时间开始       以      什么动画           使用    什么速度    动画用时    多少  (force 是否使用 只在出场的时候判断)

      at        后面跟的是     动画延迟时间
      from     后面跟的是    动画样式
      use       后面跟的是    动画力度
      during   后面跟的是    动画持续时间
      force     后面跟的是    是否使用 只有在出场动画的时候使用。进场动画无效。。
      出场动画执行时间 =进场等待时间(at)+进场动画执行时间(during)+出场等待时间(at)


    原文链接:微场景 之 swiper 进场动画和出场动画插件

    本帖被以下淘专辑推荐:

     

    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    4

    帖子

    18

    积分

    新手上路

    Rank: 1

    积分
    18
    发表于 2015-7-5 15:36:11 | 显示全部楼层
    用了这个原来的插件就用不了了?