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文件或者其他文件单独按需引入)



参考文献

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

你可能感兴趣的:(nuxt中引入wowjs)