vue3+ts+vite+wow

vue3+ts+vite+wow解决wow只执行一次的问题,通过自定义指令进行操作
在根目录新建plugins/v-wow.ts
v-wow详情
import type { Directive } from "vue";

const vWow: Directive = {
mounted(el, binding) {
const animation = binding.value || "animate__fadeInUp";

    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    el.classList.add("animate__animated", animation);

                    el.addEventListener(
                        "animationend",
                        () => {
                            el.classList.remove("animate__animated", animation);
                        },
                        { once: true }
                    );
                }
            });
        },
        {
            // ✅ 可视区域上下左右都各自扩展 50px
            rootMargin: "50px 50px 50px 50px",
            threshold: 0,
        }
    );

    (el as any).__wowObserver = observer;
    observer.observe(el);
},
unmounted(el) {
    (el as any).__wowObserver?.disconnect();
},

};

export default vWow;

在main.ts 中
import wowDirective from "./plugins/v-wow";
app.directive("wow", wowDirective);

在页面中直接使用v-wow="'animate__fadeInDown'"即可