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 ...
随机推荐
- thinkphp中volist标签
volist标签 volist标签主要用于在模板中循环输出数据集或者多维数组 volist(name,id,offset,length,key,mod,empty) name(必须):要输出的数据模型 ...
- php总结二篇
PHP的网站主要攻击方式: 1.命令注入(Command Injection) 2.eval注入(Eval Injection) 3.客户端脚本攻击(Script Insertion) 4.跨网站脚本 ...
- 将android模拟器上的db文件拷贝到电脑上
1. db文件在android手机中的存储地址一般都是/data/data/packname/databases/db_file. 2.打开cmd,运行 adb shell ,使用root权限 3.通 ...
- 如何打开 系统信息窗体和 DirectX诊断工具
开始---运行----msinfo32.exe 运行 位于C:＼Program Files＼Common Files＼Microsoft Shared＼Msinfo＼msinfo32.exe,显示计算 ...
- iOS--创建炫酷的渐变色界面
{ CAGradientLayer *_layer; } //创建渐变层 _layer =[CAGradientLayer layer]; _layer.frame=self.view.frame; ...
- java基础-接口
浏览以下内容前,请点击并阅读 声明 接口是java语言中的一个引用类型,和类一样,接口可以包含常量,方法签名,默认方法,静态方法和嵌套类型.含有方法主体的只有其中的默认方法和静态方法.接口不能被实例化 ...
- CS: Marshalling and Unmarshalling, Serialization and Unserialization
Link1: https://en.wikipedia.org/wiki/Marshalling_(computer_science) Quote: " Comparison with se ...
- PHP两个文件的相对路径
/** * relativePath 计算两个文件的相对路径 * @param file1 参作为考路径 * @param file2 相对于$file1的路径 */ function relativ ...
- csipsimple 出现单通情况
今天在测试voip电话时,突然打不通了和windows端也不通,boss发怒了. 经过排查,发现设置G729编码 //设置G729编码 prefs.setCodecPriority("g72 ...
- java文件下载，上传，解压方法
1.文件下载(亲测可用) private static final int BUFFER = 2 * 1024;// 缓冲区大小(2k)private boolean isSuccess = true ...