成帧器动作动画存在退出问题

Question

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

Answer 1

使用命令式AnimationControls API似乎覆盖了元素的其他声明性动画设置(如exit(。

将animate道具更改为只接受变体而不是动画控件似乎有效：
代码沙盒示例

我为当前变体添加了一个状态。以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"
>