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>