1.下载插件swiper.animate-twice.min.js，加载进页面。

    <!DOCTYPE html>

    <html>

    <head>

        ...

        <link rel="stylesheet" href="path/to/swiper.min.css">

        <link rel="stylesheet" href="path/to/animate.min.css">

    </head>

    <body>

        ...

        <script src="path/to/swiper.min.js"></script>

        <script src="path/to/swiper.animate-twice.min.js"></script>

    </body>

    </html>

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.在需要动画的元素上添加代码

    <div class="swiper-slide a">

                <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>

            </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.animate~之~可以执行两种动画的升级版的Swiper Animate的更多相关文章

  1. 同时对view延时执行两个动画时候的现象

    同时对view延时执行两个动画时候的现象 对于view延时执行了两个动画后,会将第一个动画效果终止了,直接在第一个动画的view的最后的状态上接执行后续的动画效果,也就是说,我们可以利用这个特性来写分 ...

  2. SQL Server--一个存储过程对同一个字段执行两种Update

    需求: 服务器程序被界面点击"置零"按钮后,所有未完成的任务的状态都置为异常结束. 但分两种情况: 0<=Status<40状态为未完成的任务1,其异常结束状态为50 ...

  3. Qt程序启动画面播放(gif与swf两种动画格式)

    学习Qt有一段时间了,发现一个小问题,网上关于Qt的资料或者总结性的学习及应用文章有点少. 比如,Qt完整的API,程序运行之前的启动画面如何按理想效果播放等,每次想在项目中添加一些应用的时候,总是找 ...

  4. css3，transition，animation两种动画实现区别

    我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...

  5. android位移动画的两种实现方式

    在android开发,我们会常常使用到位移动画,普通情况下位移动画有两种实现方式.一种是直接通过java代码去实现,第二种是通过配置文件实现动画,以下是两种动画的基本是用法: 纯Java代码实现: / ...

  6. android旋转动画的两种实现方式

    在android开发,我们会常常使用到旋转动画,普通情况下旋转动画有两种实现方式,一种是直接通过java代码去实现,第二种是通过配置文件实现动画.以下是两种动画的基本是用法: 纯Java代码实现: / ...

  7. android缩放动画的两种实现方法

    在android开发.我们会常常使用到缩放动画,普通情况下缩放动画有两种实现方式.一种是直接通过java代码去实现,第二种是通过配置文件实现动画,以下是两种动画的基本是用法: Java代码实现: // ...

  8. 导模块的细节：（跨文件导入模块 &模块的两种执行方式） | 包的概念与使用 | 包中的相对导入语法

    今日内容 包: 1. 导入模块的细节 2. 包的概念与使用 3. 包中的相对导入语法 跨文件夹导入模块 1. 假设有一个文件夹a ,a 的下面有一个ma 的模块,如果a文件夹所在目录在环境变量,a文件 ...

  9. Android开发之三种动画

    转载:http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html http://www.lightskystreet.com/2 ...

随机推荐

  1. Android笔记：调试android程序

    1.Debug 第一步: 添加断点 第二步: 右击项目→Debug As→Android Application  //之后一个对话框出现,一会自动消失 第三步: 执行手机端操作,Eclipse 就会 ...

  2. Java Mysql连接池配置和案例分析--超时异常和处理

    前言: 最近在开发服务的时候, 发现服务只要一段时间不用, 下次首次访问总是失败. 该问题影响虽不大, 但终究影响用户体验. 观察日志后发现, mysql连接因长时间空闲而被关闭, 使用时没有死链检测 ...

  3. 【Java EE 学习 27】【oracle学习第一天】

    一.oracle 11g安装的注意事项 1.超级管理员密码设置要符合要求(特别是不能以数字打头),否则在创建数据库的时候会产生ora-00922错误以及ora-28000错误. 解决方法:http:/ ...

  4. Epub基础知识介绍

    转载自:http://www.cnblogs.com/linlf03/archive/2011/12/13/2286218.html 一.什么是epub epub是一个完全开放和免费的电子书标准.它可 ...

  5. 使用FP-Growth算法高效发现频繁项集【zz】

    FP树构造 FP Growth算法利用了巧妙的数据结构,大大降低了Aproir挖掘算法的代价,他不需要不断得生成候选项目队列和不断得扫描整个数据库进行比对.为了达到这样的效果,它采用了一种简洁的数据结 ...

  6. B站开源ijkplayer 等多个项目

    弹幕视频网 Bilibili(B 站)近日在 GitHub 网站上建立了开源工作组(BOSTF),用以分享与维护自己的开源项目,其中包括 DanmakuFlameMaster(燃烧吧!烈焰弹幕使)与 ...

  7. Ubuntu 16.04 install 搜狗输入法

    1.#先添加以下源 sudo add-apt-repository ppa:fcitx-team/nightly 2.#添加源之后需要更新一下系统 sudo apt-get update 3.#开始安 ...

  8. oracle 大表 迅速 导出(使用命令行)

    导出: exp dbname/dbpwd@orclname file=c:\xxx.dmp tables=(tablename) 导入:imp ross_delivery/123456@orcl fi ...

  9. SQL行合并

    CREATE TABLE SC ( Student ), Course ) ) INSERT INTO SC SELECT N'张三',N'大学语文' UNION ALL SELECT N'李四',N ...

  10. 深入浅出JMS(二)--ActiveMQ简单介绍以及安装

    现实的企业中,对于消息通信的应用一直都非常的火热,而且在J2EE的企业应用中扮演着特殊的角色,所以对于它研究是非常有必要的. 上篇博文深入浅出JMS(一)–JMS基本概念,我们介绍了消息通信的规范JM ...