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 ...
随机推荐
- Ubuntu下三个实用的录屏软件
Ubuntu下三个实用的录屏软件 Kazam 优点: 易安装 可选择区域录制,也可全屏录制 有录屏和截图功能 安装: sudo apt-get install kazam 展示: Simple Scr ...
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- sql server存储过程分页，行变列
CREATE PROCEDURE [dbo].[PROC_GetPriviousAndNextDetailContent]@Index varchar(20),--表主键@Table varchar( ...
- 我的c++学习(10)this指针
问题:当在对象的外部访问该对象的公有成员时,必须指明是哪一个对象.但是当我们用对象的成员函数来访问本对象的成员时,在成员函数中只要给出成员名就可以实现对该对象成员的访问.再进一步可用同一个类创建很多个 ...
- Python爬虫学习（6）: 爬取MM图片
为了有趣我们今天就主要去爬取以下MM的图片,并将其按名保存在本地.要爬取的网站为: 大秀台模特网 1. 分析网站 进入官网后我们发现有很多分类: 而我们要爬取的模特中的女模内容,点进入之后其网址为:h ...
- 四则运算appNABCD模型
团队: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...
- java-集合4
浏览以下内容前,请点击并阅读 声明 对象排序 一个List对象中如果元素类型为String,则其按字母表顺序排序,而如果元素类型为Date,则按照年代排序,那如何判断元素的排序呢?String和Dat ...
- ACM: NBUT 1105 多连块拼图 - 水题 - 模拟
NBUT 1105 多连块拼图 Time Limit:1000MS Memory Limit:65535KB 64bit IO Format: Practice Appoint ...
- C# DataTable 行转列
#region 根据datatable获得列名 /// <summary> /// 根据datatable获得列名 /// </summary> /// <param n ...
- javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...