swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
<!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.说明
swiper.animate~之~可以执行两种动画的升级版的Swiper Animate的更多相关文章
- 同时对view延时执行两个动画时候的现象
同时对view延时执行两个动画时候的现象 对于view延时执行了两个动画后,会将第一个动画效果终止了,直接在第一个动画的view的最后的状态上接执行后续的动画效果,也就是说,我们可以利用这个特性来写分 ...
- SQL Server--一个存储过程对同一个字段执行两种Update
需求: 服务器程序被界面点击"置零"按钮后,所有未完成的任务的状态都置为异常结束. 但分两种情况: 0<=Status<40状态为未完成的任务1,其异常结束状态为50 ...
- Qt程序启动画面播放(gif与swf两种动画格式)
学习Qt有一段时间了,发现一个小问题,网上关于Qt的资料或者总结性的学习及应用文章有点少. 比如,Qt完整的API,程序运行之前的启动画面如何按理想效果播放等,每次想在项目中添加一些应用的时候,总是找 ...
- css3，transition，animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...
- android位移动画的两种实现方式
在android开发,我们会常常使用到位移动画,普通情况下位移动画有两种实现方式.一种是直接通过java代码去实现,第二种是通过配置文件实现动画,以下是两种动画的基本是用法: 纯Java代码实现: / ...
- android旋转动画的两种实现方式
在android开发,我们会常常使用到旋转动画,普通情况下旋转动画有两种实现方式,一种是直接通过java代码去实现,第二种是通过配置文件实现动画.以下是两种动画的基本是用法: 纯Java代码实现: / ...
- android缩放动画的两种实现方法
在android开发.我们会常常使用到缩放动画,普通情况下缩放动画有两种实现方式.一种是直接通过java代码去实现,第二种是通过配置文件实现动画,以下是两种动画的基本是用法: Java代码实现: // ...
- 导模块的细节：（跨文件导入模块 &模块的两种执行方式） | 包的概念与使用 | 包中的相对导入语法
今日内容 包: 1. 导入模块的细节 2. 包的概念与使用 3. 包中的相对导入语法 跨文件夹导入模块 1. 假设有一个文件夹a ,a 的下面有一个ma 的模块,如果a文件夹所在目录在环境变量,a文件 ...
- Android开发之三种动画
转载:http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html http://www.lightskystreet.com/2 ...
随机推荐
- app上线具体流程
前言:前两天有个同事问到我APP上传的问题,几个地方我竟然模糊不清了,查了些资料在这里整理一下.鄙人是一个懒猿,一直以来都是从各位大神的博客中汲取营养,却懒于写自己的.越来越觉得写博客对于一个开发者来 ...
- 51. N-Queens
题目: The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two que ...
- request getParameter getAttribute
在浏览器地址输入,表示传入一个参数test,值为123 http://localhost:8888/Test/index.jsp?test=123 在index.jsp中尝试使用EL表达式取出,代码如 ...
- Angular2表格/可排序/table
Angular2表格 1. 官网下载Angular2开发环境,以及给出的quickstart代码示例demo(地址如下),具体步骤不在详述. https://github.com/angular/qu ...
- pyhon 模块与库
引用“http://www.iplaypython.com/module/” 引用“http://codingnow.cn/language/265.html” Python模块是什么? 玩蛇网:一个 ...
- c++2008 并行配置文件和获取字典的所有key的方法
1 需要 在官网 下载对应的执行包... 2, # !/usr/bin/python3.4 # -*- coding: utf-8 -*- b = { 'video':0, 'music':23 } ...
- Python for Infomatics 第12章 网络编程二（译）
注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 12.3 用HTTP协议获取一张 ...
- NSMutableAttributedString常用代码
NSTextAttachment *attachment = [[NSTextAttachment alloc] init]; attachment.image = [UIImage imageNam ...
- MongoDB-C#驱动基本操作
#region IMongoQuery //Query.EQ("", val);//字段值=val //Query.NE("", val);//字段值!=val ...
- Mongoose 的实例方法中访问静态方法
方法比较简单,也比较粗糙和丑陋,就是通过构造函数来访问静态方法,大致如下: 123456789 WorkSpaceSchema.methods.getPrice = function(startTim ...