vue中使用wow.js添加特效

vue中使用wow.js添加特效
想要给一些演示项目添加一些好看的效果

1、安装wow.js(animate.css会被自动安装，但是需要注意引用位置)

npm install wowjs --save

2、在main.js中引入animate.css

因为安装wow.js自动安装的animate.css位置在wow.js里面，所以需要注意引用位置得这样写。

import 'wowjs/css/libs/animate.css'
import wow from 'wowjs'
Vue.prototype.$wow = wow
Vue.use(wow)

当然也可以手动再装一次animate.css,他的位置就在外面，在node-module下

npm install animate.css --save
然后引用
import 'animate.css'

3、页面使用，为元素添加类名，然后mounted初始化wow就可以了

页面元素

<ul>
      <li>
        <div class="wow slideInLeft">第一项</div>
      </li>
      <li>
        <div class="wow slideInLeft">第二项</div>
      </li>
      <li>
        <div class="wow slideInLeft">第三项</div>
      </li>
      <li>
        <div class="wow slideInLeft">第四项</div>
      </li>
      <li>
        <div class="wow slideInLeft">第五项</div>
      </li>
</ul>

除了类名，还有其他的延时属性，可以自行查阅

new this.$wow.WOW().init()

这些文字就会是从左到右的效果出现