安装animated和wow

npm install animate
npm install wow

image.png

image.png

下载文件

下载animated样式连接
nuxt.config.js

image.png

在根目录中的assets文件中文件目录

image.png

将下载的文件夹中的\animate.css内容复制到该文件

image.png

使用

<script>
if (process.browser) { // 在这里根据环境引入wow.js
  var {WOW} = require('wowjs')
}
mounted() {
    if (process.browser) {  // 在页面mounted生命周期里面 根据环境实例化WOW
        new WOW({
            live: false, 
            offset: 0
        }).init()
    } 
  }
</script>

<template>
<div class="wow fadeInUp animated">
</div>
</template>

说明：在需要动画载入的div中加入class，其中animated和wow必填，fadeInUp是效果
更多效果可以去官网查看
animated官网