交叉口观察员API与反应

Question

我正在尝试在一个页面上创建一个导航跟踪器，其中用户使用交叉点观察者API滚动，跟踪器显示页面上的哪个部分会做出反应，就像网站上显示的一样https://olaolu.dev/对于滚动时发生变化的框(滚动指示符(，我已经创建了一个代码沙盒。任何能帮助我的人都意义重大。这里有错误，那里甚至不知道该怎么办，链接到下面的代码沙箱

https://codesandbox.io/s/tender-oskar-rvbz5?file=/src/App.js

Answer 1

我以前只使用带帧器运动的反应交叉观察器，我在h1中添加了一个ref，这样观察器就知道它是否在View中。

如果inView为true，controls.start将触发。

import { useInView } from "react-intersection-observer";
const scrollVariant = {
hidden: {
opacity: 0,
x: 0,
transition: {
duration: 1,
},
},
visible: {
opacity: 1,
x: 250,
transition: {
duration: 1,
},
},
};

export default function Home() {
const controls = useAnimation();
const { ref, inView } = useInView({
triggerOnce: false,
});
React.useEffect(() => {
if (inView) {
controls.start("visible");
}
if (!inView) {
controls.start("hidden");
}
}, [controls, inView]);
return (
<>
<motion.h1
variants={scrollVariant}
initial="hidden"
animate={controls}
ref={ref}
>
</>
);
}