成帧器运动Animate Presence退出问题

问题描述

我遇到了制框运动AnimatePresence组件的问题。我试图在组件在视口中可见后开始动画，以实现此目的，我使用了react-intersection-observer。它可以按预期的方式用于开始动画，但是退出动画会中断，我不确定是什么引起了问题。 我创建了一个沙盒，可以在https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js

上重现此行为。

解决方法

使用命令式AnimationControls API似乎会覆盖该元素的其他声明性动画设置（例如exit）。

更改animate道具以仅接受变体而不是动画控件似乎可行：
Code Sandbox example

我为当前变体添加了状态。以hidden开头，并在visible更改时更新为inView：

// use variant instead of Animation Controls
const [variant,setVariant] = useState("hidden");

useEffect(() => {
  if (inView) {
    setVariant("visible");
  }
},[inView]);

然后使用该变体状态更新div上的动画道具：

<AnimatePresence exitBeforeEnter>
  {show && (
    <motion.div
      ref={ref}
      variants={containerVariants}
      initial="hidden"
      animate={variant} // use variant instead of Animation Controls
      exit="hidden"
    >