查看: 27057|回复: 36

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

[复制链接]
  • TA的每日心情
    无聊
    2017-3-15 17:01
  • 签到天数: 14 天

    [LV.3]偶尔看看II

    47

    主题

    265

    帖子

    6186

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    6186
    发表于 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 | 显示全部楼层
    用了这个原来的插件就用不了了?
    回复 支持 1 反对 0

    使用道具 举报

    该用户从未签到

    4

    主题

    18

    帖子

    170

    积分

    注册会员

    Rank: 2

    积分
    170
    发表于 2015-7-7 10:09:35 | 显示全部楼层
    哈根达斯01 发表于 2015-7-5 15:36
    用了这个原来的插件就用不了了?

    这个应该是覆盖了原来的吧。
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    7

    帖子

    77

    积分

    注册会员

    Rank: 2

    积分
    77
    发表于 2015-9-5 14:05:31 | 显示全部楼层
    发现使用了这个以后无法翻到下一页了
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    53

    积分

    注册会员

    Rank: 2

    积分
    53
    发表于 2015-11-30 20:16:46 | 显示全部楼层
    本帖最后由 encryption 于 2015-11-30 20:28 编辑

    提几个问题
    第4、149行, window.document.documentElement.querySelectorAll(".ani")  如果一个页面对swiper有多次使用,这个地方可能会重复调用
    第148行 clearInterval(OutAniTimeout) 应该是clearTimeout(OutAniTimeout)吧
    第29行  声明的nowtimestamp貌似没什么用
    第10、19行最好用正则去实现 slide_in.value.split(/\s+/)
    第82行没有明白  如果出现负值怎么办
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    53

    积分

    注册会员

    Rank: 2

    积分
    53
    发表于 2015-11-30 20:18:04 | 显示全部楼层
    clearTimeout(OutAniTimeout)
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    帖子

    32

    积分

    新手上路

    Rank: 1

    积分
    32
    发表于 2016-1-5 11:49:32 | 显示全部楼层
    这个怎么是左右滑动的?能改成上下滑动的吗?
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    22

    帖子

    22

    积分

    新手上路

    Rank: 1

    积分
    22
    发表于 2016-1-6 11:43:37 | 显示全部楼层
    这个swiper.animate.min.js怎么用,有教程吗
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    5

    帖子

    15

    积分

    新手上路

    Rank: 1

    积分
    15
    发表于 2016-1-24 18:59:58 | 显示全部楼层
    已下载、学习中,感谢分享
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    6

    帖子

    56

    积分

    注册会员

    Rank: 2

    积分
    56
    发表于 2016-2-12 23:40:01 | 显示全部楼层
    使用中还有别的问题出现吗
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2017-9-22 08:40 , Processed in 0.388475 second(s), 32 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表