Framer 运动 Animate Presence 退出问题

【问题标题】：Framer motion Animate Presence exit issueFramer 运动 Animate Presence 退出问题
【发布时间】：2020-09-17 05:41:07
【问题描述】：

我遇到了 framer-motion AnimatePresence 组件的问题。我试图在组件在视口中可见后启动动画，为了实现这一点，我使用了 react-intersection-observer。它按预期用于开始动画，但退出动画中断，我不确定是什么导致了问题。我在https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js

创建了一个可以重现此行为的沙盒

【问题讨论】：

这确实很奇怪，可能是一个错误，我看到你已经为 framer github.com/framer/motion/issues/766提出了问题

标签： reactjs framer-motion react-intersection-observer

【解决方案1】：

看起来使用命令式AnimationControls API 会覆盖元素的其他声明性动画设置（如exit）。

将 animate 属性更改为仅接受变体而不是动画控件似乎可行：
Code Sandbox example

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

// 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"
    >

【讨论】：