nuxt3添加wowjs动效

1、安装wowjs

pnpm i wowjs@1.1.3

2、node_modules复制wowjs代码

路径/node_modules/wowjs/dist/wow.js。不知道路径则查看node_modules/wowjs/package.json里面的main选项

2.1、在public文件夹创建wowjs.js文件

/public/wowjs.js

export default (callthis) => { // !!// 这是我们复制的wowjs自动调用函数，我们更改里面绑定的this(function() {// ...xxx}).call(callthis); // !!  这里传入上面的参数callthis
}

3、plugins创建插件文件wowjs.client.ts

路径/plugins/wowjs.client.ts。注意后缀名.client.ts不可更改

import wowjs from "public/wowjs.js"export default defineNuxtPlugin(() => {// 先绑定window，注意调用顺序不能错wowjs(window)// 再调用WOWnew WOW({animateClass: "animated",offset: 0,live: true,}).init();
})

4、配置nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({// ...// 引入全局csscss: ['wowjs/css/libs/animate.css'],
});

5、测试

<div class=" wow fadeInUp" data-wow-duration="2s"></div>