vue中按需使用animate.css以及使用方法

animate.css是一个很方便的动画库，可以通过npm直接安装

npm install animate.css --save

安装以后打开node_modules文件夹下的animate.css文件夹下的animate-config.json，把不需要的设为false即可

  "attention_seekers": {
    "bounce": false,
    "flash": false,
    "pulse": false,
    "rubberBand": false,
    "shake": false,
    "headShake": false,
    "swing": false,
    "tada": false,
    "wobble": false,
    "jello": false,
    "heartBeat": false
  },

使用方法是加在div的class中，第一个是定死的animated，第二个是你使用的动画名称

<div class="animated bounce">Example</div>

当然，你还可以设置延迟，有四个选项，用法如下

<div class="animated bounce delay-2s">Example</div>
<div class="animated bounce delay-3s">Example</div>
<div class="animated bounce delay-4s">Example</div>
<div class="animated bounce delay-5s">Example</div>

你还可以设置动画的速度，有四个选项，用法如下，分别是慢，更慢，快，更快。

<div class="animated bounce slow">Example</div>
<div class="animated bounce slower">Example</div>
<div class="animated bounce fast">Example</div>
<div class="animated bounce faster">Example</div>