vue3+ts+vite+wow解決wow只執(zhí)行一次的問(wèn)題,通過(guò)自定義指令進(jìn)行操作
在根目錄新建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 }
                    );
                }
            });
        },
        {
            // ? 可視區(qū)域上下左右都各自擴(kuò)展 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);

在頁(yè)面中直接使用v-wow="'animate__fadeInDown'"即可