Wow.js是一个不依赖于jQuery的轻量级js库，其作用就是能够在网页不断往下滚动的时候逐渐释放通过AnimateCSS添加的这些动画，让页面滚动更有趣。本文将介绍Wow.js在Vue项目中的使用。
注意：必须和AnimateCSS配合使用。

第一步：安装Wow.js和Animate.css NPM包

在命令行中执行

npm install wow.js animate.css@3.72 --save

Animate.css NPM包的使用可以参考往期文章《在Vue.js项目中使用Animate.css类库实现动画》

第二步：引入及使用

在main.js中引入

// 省略部分代码
import wow from 'wowjs'
import animated from 'animate.css'

Vue.use(animated) 
Vue.prototype.$wow = wow
 
// 将wow挂载到Vue，这样我们可以在组件中通过this.$wow使用wow.js。
 
// 当然也可通过在组件中使用import wow from 'wowjs' 或者import {wow} from 'wowjs'来使用。

在vue页面中使用

<!-- template -->
 
<div class="ithangBox" >
    <section class="wow animated slideInLeft" data-wow-duration="1s" >
    </section>
        <section class="wow animated slideInLeft" data-wow-duration="2s" >
    </section> 
        <section class="wow animated slideInLeft" data-wow-duration="1s" >
    </section> 
        <section class="wow animated slideInLeft" data-wow-duration="2s" >
    </section> 
        <section class="wow animated slideInLeft" data-wow-duration="1s" >
    </section>
</div>

// script

export default {
  name:'Home',
  data() {
      return {
      }
  },
  mounted(){
      new this.$wow.WOW().init()
  }
}

温馨提示：本文最后更新于2023-05-15 22:13:38，某些文章具有时效性，若有错误或已失效，请在下方留言或联系ITHang。

本站网络名称： ITHang

本站永久链接： https://www.ithang.cn

网站侵权说明：本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长Email：admin#ithang.cn(将#换成@) 进行删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END