animate.css
aniamte.css是一个很方便的库，内置了许多常用的动画
和jquery搭配使用比较方便
$.fn.extend({
animateCss: function (animationName, cb) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
if(!animationName || typeof animationName !== 'string') return conosle.error(`${aniamationName} must be legal animation name`)
this.addClass('animated ' + animationName).one(animationEnd, function(e) {
$(this).removeClass('animated ' + animationName);
cb && cb.call(this, e);
});
}
});
实现方式
animate.css其实就是一个写好animation的css文件，通过为元素加上不同的class来实现动画的效果，然后通过监听animationend(AnimationEvent)事件，当动画结束的时候移除这个动画的class，通过jquery封装后可以方便使用
按需加载
在使用的时候可以通过安装npm包
npm install animate.css
安装后的animate.css的大小有71k，可以按需移除一些不必要的动画，可以进入node_module/animate.css来按需打包，进入animate-config.json文件：
image.png
image.png
每个部分使用数组的形式，可以把不需要的东西直接删除，安装完依赖后，直接run node_module/.bin/gulp就可以，例如，我只需要bounce，
image.png
然后运行命令直接打包, 打包完后的animate.css只剩下4.6k
image.png
自定义动画
有时需要根据不同的需求自定义动画和时间，自定义动画很简单，例如，我有一个active动画：
image.png
写好后，只需要根据其他内置的动画一样调用就可以了：
image.png
参考
