wow.js vue项目的使用

---

安装

npm install wowjs

---

配置

在main.js文件中添加：

import { WOW } from 'wowjs';
import animated from 'wowjs/css/libs/animate.css';
//这里需要将样式用起来，
Vue.use(animated);
//创建全局实例
Vue.prototype.$wow = new WOW({
  boxClass: 'wow', // 需要执行动画的元素的 class
  animateClass: 'animated', //animation.css 动画的 class
  offset: 0, // 距离可视区域多少开始执行动画
  mobile: true, // 是否在移动设备上执行动画
  live: true, // 异步加载的内容是否有效
});

组件中使用

注意：必须是行内块元素或者块元素

<p class="wow bounceInDown center name">AKUSAMA</p>

初始化wow.js

 mounted() {
    this.$nextTick(() => {
      this.$wow.init();
    });
  },

---

参考网站

原网站好像挂了，这个可以看动态效果 戳我

相中哪个特效F12复制类名