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)
    // 再调用WOW
    new WOW({
        animateClass: "animated",
        offset: 0,
        live: true,
    }).init();
})

4、配置nuxt.config.ts

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

5、测试

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