使用framer motion时，我试图在一个对象进入视口时淡入它，然后我希望它保持固定一段时间，最后淡出。
到目前为止，我只设法淡入和淡出元素时，它离开视口，这是为时已晚，我无法找出如何固定元素在某一滚动位置。

• • 以下是我取得的成就：**

• • 这是我努力实现的目标：**

• • 这是代码沙盒：**https://codesandbox.io/s/vigorous-dawn-q4figi?file=/src/App.js

下面是代码：

export default function App() {
  const [ref, inView] = useInView({
    threshold: 0.5,
    triggerOnce: false
  });

  const variants = {
    visible: { opacity: 1, scale: 1, y: 0 },
    hidden: {
      opacity: 0,
      scale: 0.65,
      y: 50
    }
  };
  return (
    <div className="App">
      <div style={{ height: 500 }} />
      <motion.div
        animate={inView ? "visible" : "hidden"}
        variants={variants}
        exit="hidden"
        transition={{ duration: 2, ease: "easeOut" }}
        className="box"
        ref={ref}
      />
    </div>
  );
}

我将非常感谢任何形式的帮助!