web/public/myWow.js

const offset = 0;
const signCalss = 'mywow';
const animateClass = 'animate__animated';
const fixationSignCalss = "fWow"



export default defineNuxtPlugin((nuxtApp) => {
    const innerHeight = window.innerHeight - offset;

    const onAnimated = () => {
        const wowEl = document.querySelectorAll(`.${signCalss}`);
        try {
            if (wowEl && wowEl.length > 0) {
                wowEl.forEach(el => {
                    // const elClassStr = el.classList.value || '';
                    if (!el.classList.contains(animateClass)) {
                        // 元素距离可视区顶部的距离 = 元素距离页面顶部的距离 - 页面向上滚动的距离
                        const ks_h = el.offsetTop - window.scrollY;
                        // const ks_h = el.offsetTop - window.scrollY;
                        // 当元素到达 加载动画区域以内时，动态处理动画class
                        if (ks_h <= innerHeight && ks_h > offset || el.className.indexOf(fixationSignCalss) != -1) {
                            // console.log("el.getAttribute('animate')", el)
                            const animateParams = el.getAttribute('animate-param').split(',')
                            el.classList.remove(signCalss);
                            if (animateParams && animateParams.length > 0) {
                                let str = animateClass;
                                animateParams.forEach(ap => {
                                    el.classList.add(`animate__${ap}`)
                                })
                                el.classList.add(animateClass)

                            }
                        }
                    }

                })
            }
        } catch { }
    }

    window.addEventListener("scroll", onAnimated);
    nuxtApp.provide('onAnimated', onAnimated);
})