• 我使用useInView来跟踪div何时滚动过去，并在发生变化时调用useEffect。useInView reference
• 当它在视图中时，它运行你的动画&当视图外时，它会做一个快速的反向动画（也许这第二部分可以做得更好，但它工作）。
• 我还使用了useAnimate而不是div定义see more about useAnimate here。
• 我在你的codesandbox上编辑了App.js，但没有帐户来保存和共享链接。如果你将下面的代码粘贴到你的沙盒的App.js中，它应该会给予你你想要的。

import "./styles.css";
import { motion, useInView, useAnimate  } from "framer-motion";
import { useEffect, useRef } from "react";

export default function App() {
  const [scope, animate] = useAnimate()
  const motionDiv = useRef(null)
  const isInView = useInView(motionDiv)

  useEffect(()=>{
    if(isInView){
      animate("div", { x: 300 }, { duration:5, ease: "linear" })
    }else{
      animate("div", { x: 0 }, { duration:0 })
    }
  },[isInView, animate])

  return (
    <div ref={scope}  style={{ height: "1000px" }} >
    <div ref={motionDiv}>
      <motion.div
        id="box"
      >
        <p>
          The box should be moving now. Scroll down and then up again. The
          animation will not instantly reset but run backwards.
        </p>
      </motion.div>
    </div>
    </div>
  );
}

字符串

p7dxb的回答给了我一个想法。我找到了一个非常简单的解决办法。您只需为initial和whileInView设置不同的过渡值。对initial使用0秒的持续时间：

import "./styles.css";
import { motion } from "framer-motion";

export default function App() {
  return (
    <div style={{ height: "1000px" }}>
      <motion.div
        id="box"
        initial={{ x: 0, transition: { duration: 0 } }}
        whileInView={{ x: 300, transition: { duration: 5, ease: "linear" } }}
      >
        <p>
          The box should be moving now. Scroll down and then up again. The
          animation will not instantly reset but run backwards.
        </p>
      </motion.div>
    </div>
  );
}

字符串
下面是新的沙盒：https://codesandbox.io/s/objective-elgamal-p49wdq