摘要
这是一个全部由css3做的动画库，担心兼容性的慎用。基本操作
- 引入animate.css:
引入本地：
<link rel="stylesheet" href="animate.min.css">
引入cdn：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
- 简单使用
<h1 class="animated infinite bounce">Example</h1>
//基础类[必选]：animated
//是否循环动画[可选]：infinite。有则循环动画
//动画类[必选]： bounce
//自定义动画的实现
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
//注意vendor是浏览器前缀
//
//EXP:
<div class="animated flipInY mine">i am animate</div>
.mine {
animation-duration: 5s; //动画执行时间
animation-delay: 1s; //延迟
animation-iteration-count: 3; //动画循环次数
-webkit-animation-duration: 5s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 3;
}
- 配合jquery使用
//jquery添加动画
$('#yourElement').addClass('animated bounceOutLeft');
//检测动画结束，触发回调函数
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
//毁掉函数：doSomething
回调函数只有动画结束的时候才会回调（上面mine那个类也证明了，动画循环3次后才会回调回调函数），当使用infinite做循环动画的时候，是不会触发回调函数，估计这也是animate的github上文档是使用one来绑定回调。
ps: one绑定的事件只会执行一次。
//封装自己的动画函数
$.fn.extend({
animateCss: function (animationName, callback) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
callback && callback.call(this);
});
}
});
