基于webpack配置的animate.css按需加载

安装

$ npm install animate.css --save
#或者 $ yarn add animate.css

安装后的目录

--node_modules
    --animate.css
        --source
        --.editorconfig
        --.prettierignore
        --.travis.yml
        --animate-config.json
        --animate.css
        --animate.min.css
        --bower.json
        --gulpfile.js
        --LICENSE
        --package.json
        --README.md

使用

官方用法参考

按需加载(Custom Builds)：

第一步，在终端命令行进入文件 node_ modules/animate.css

dukes-MacBook-Pro:animate.css dukeshao$

第二步，安装相关依赖npm install

dukes-MacBook-Pro:animate.css dukeshao$ npm install

第三步，配置所需动画

1.打开 animate-config.json 文件，将不需要的动画配置为 false

2.在 animate.css 文件下运行 gulp命令，执行默认任务

dukes-MacBook-Pro:animate.css dukeshao$ gulp

animate.css 和 animate.min.css 文件中只包含配置为 true 的动画，若要添加动画，更改animate-config.json 配置文件后再启动 gulp 默认任务即可

效果

按需加载前

按需加载前

按需加载后

按需加载后