nuxt中引入wowjs

随页面滚动的动画

这里做一个查阅资料的笔记，呈现方式直接代码
1.plugins文件夹下面建立wow.js

import Vue from 'vue';
import { WOW } from 'wowjs'

window.WOW = WOW;  //因为服务端没有window，而wowjs里面是有window的，所以这里必须手动创建一个
Vue.prototype.$wow = new WOW()

2.nuxt.config.js配置

css: ['animate.css/animate.css'],  //这里使用的wowjs库里面的css，如果需要animate官方的动画，可自行下载、配置
plugins: [
    { src: '@/plugins/wow.js', ssr: false }
],

3.使用（可以再layout文件或者其他文件单独按需引入）

<template>
<!-- wow是必须的，后面的classname就是动画 -->
  <div class="wow animate__bounce " data-wow-delay="1.5s" data-wow-iteration="1"></div>
</template>
<script>
  mounted() {
   const _this = this;
        if (process.browser) {
          _this.$nextTick(() => {
            new _this.$wow({ animateClass: "animate__animated" }).init();
          });
        }
  });
},
</script>

参考文献

1.wowjs官网
2.animate.cs官网
3 nuxt使用wowjs的config和plugins配置
4 Nuxtjs上使用wow.js+animate.css实现滚动加载动画