最近在看vue的时候了解到的一个css动画库，使用起来简单便捷，动画种类也比较丰富，在这里分享一下
官网地址：Animate.css
静态使用：
animated：使用animate.css的必要类名；
jackInTheBox：这里填写使用动画的名称；
delay-3s：这里可以写动画的延时执行时间
<p class="animated jackInTheBox delay-3s" style="padding-left: 100px;font-size: 16px"><strong>Animate</strong></p>
动态使用(jquery)：
jquery.one() -----用来执行事件最多一次；
$.fn.extend({animateCss: function(){}}) ----添加animateCss方法到jQuery原型($.fn)；
animateCss方法扩展jQuery并添加一个为您完成所有操作的功能
html：
<h1 id="demo">Animate</h1>
<button id="btn">click</button>
js：
$.fn.extend({
animateCss: function(animationName, callback) {
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if (typeof callback === 'function') callback();
});
return this;
},
});
$("#btn").click(function () {
$('#demo').animateCss('jackInTheBox',function () {
//做一些想做的事
});
})
