随页面滚动的动画
这里做一个查阅资料的笔记，呈现方式直接代码
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实现滚动加载动画
