我使用 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;
}
寻找可能的解决方案。