我使用 VueUse 中的 useIntersectionObserver 在元素进入视口时触发淡入动画。如果我导航到另一个页面（例如，单击轮播中的某个项目以查看其详细信息），则会出现以下情况：

我使用 useIntersectionObserver VueUse 在元素进入视口时触发淡入动画。如果我导航到另一个页面（例如，单击轮播中的项目以查看其详细信息），然后返回到具有保存位置的上一个路线，则交叉点观察器不会自动触发，并且除非我向下和向上滚动页面或刷新页面，否则元素将保持隐藏状态。此外，如果我滚动到轮播，单击轮播项目并导航到另一条路线，观察器有时也会无法触发。因此，这不仅是返回路线时的问题，而且在滚动和导航到另一条路线后也会出现问题。

为了在观察器激活之前隐藏元素，我使用了 invisible 包含 visibility: hidden 和 的 opacity: 0 。问题似乎是交叉点观察器在 visibility: hidden 应用时没有检测到元素，因此返回页面时淡入动画永远不会启动。

演示： https://www.veed.io/view/e380440b-c04a-4508-a397-6448ac08a5d9?panel=share ?panel=share 。在这里，我导航到 /details 路线，然后返回并重新加载页面。

观察者.vue：

<template>
    <div ref="observerRef">
        <slot :isVisible="isVisible" />
    </div>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core';

const props = defineProps({
    rootMargin: {
        type: String,
        default: '0px',
    },
});

const observerRef = ref(null);
const isVisible = ref(false);

const { stop } = useIntersectionObserver(
    observerRef,
    ([{ isIntersecting }]) => {
        if (isIntersecting) {
            isVisible.value = isIntersecting;
            stop();
        }
    },
    {
        rootMargin: props.rootMargin,
    }
);
</script>

我使用交叉观察器的组件：

<ItemObserver v-slot="{ isVisible }">
    <div :class="isVisible ? 'fade-in' : 'invisible'">
        <CarouselContent>
            <CarouselItem v-for="item in 8" :key="item">
                <NuxtLink
                    to="/">
                    Link
                </NuxtLink>
            </CarouselItem>
        </CarouselContent>
    </div>
</ItemObserver>

CSS：

@keyframes fadeIn {
    from {
        visibility: hidden;
        opacity: 0;
    }
    to {
        visibility: visible;
        opacity: 1;
    }
}

.fade-in {
    visibility: hidden;
    opacity: 0;
    animation: fadeIn 0.3s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}
.invisible {
    visibility: hidden;
    opacity: 0;
}

寻找可能的解决方案。