animate.css
aniamte.css是一個很方便的庫蟹略，內(nèi)置了許多常用的動畫
和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);
});
}
});
實現(xiàn)方式
animate.css其實就是一個寫好animation的css文件，通過為元素加上不同的class來實現(xiàn)動畫的效果，然后通過監(jiān)聽animationend(AnimationEvent)事件，當(dāng)動畫結(jié)束的時候移除這個動畫的class滔灶，通過jquery封裝后可以方便使用
按需加載
在使用的時候可以通過安裝npm包
npm install animate.css
安裝后的animate.css的大小有71k揖膜，可以按需移除一些不必要的動畫疮蹦，可以進(jìn)入node_module/animate.css來按需打包，進(jìn)入animate-config.json文件：
image.png
image.png
每個部分使用數(shù)組的形式否副，可以把不需要的東西直接刪除汉矿，安裝完依賴后，直接
run node_module/.bin/gulp就可以备禀，例如洲拇，我只需要bounce奈揍，
image.png
然后運(yùn)行命令直接打包, 打包完后的animate.css只剩下4.6k
image.png
自定義動畫
有時需要根據(jù)不同的需求自定義動畫和時間，自定義動畫很簡單赋续，例如男翰，我有一個active動畫：
image.png
寫好后，只需要根據(jù)其他內(nèi)置的動畫一樣調(diào)用就可以了：
image.png
