vue中使用wow.js添加特效

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

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()

这些文字就会是从左到右的效果出现
vue中使用wow.js添加特效_第2张图片

你可能感兴趣的:(vue,vue.js)