使用animate.css完成动画

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

参考

animate.css
animationend