framer motion-dom节点不会在退出动画后立即卸载

Question

我已经创建了一个动画模式容器大部分情况下都很好唯一的问题是，在完成退出动画后，需要一两秒钟才能卸载(在此期间无法单击其他任何位置)

代码沙箱-https://codesandbox.io/s/restless-platform-oovo1?file=/src/App.js

查看问题

• 点击显示模式按钮
• 单击任意位置关闭模态
• 注意，滚动条仍然存在，表示modal未卸载
• 此外，在退出动画后单击"打开模态"按钮时，您不能立即重新打开模态(持续1秒)

我看过safeToremove，但不知道如何使用它，因为没有合适的文档

Answer 1

我同意文档在这方面有点令人沮丧-以下是我通过玩它学到的东西。

文档显示存在组件中usePresence()的代码为：

import { usePresence } from "framer-motion"
export const Component = () => {
const [isPresent, safeToRemove] = usePresence()
useEffect(() => {
!isPresent && setTimeout(safeToRemove, 1000)
}, [isPresent])
return <div />
}

这最初似乎是武断的/纯粹是一个例子。然而，在玩了它之后，事实证明，如果您初始化usePresence()，这个useEffect代码现在是存在正确工作所必需的，并且在一定程度上决定了存在的功能尝试初始化usePresence，然后注释掉行

// !isPresent && setTimeout(safeToRemove, 1000)

它将打破你的动画存在。

因此，包装safeToRemove的setTimeout函数实际上是确定AnimatePresence的核心功能，并能够确定虚拟DOM再次可点击的时间，等等。

现在，我在玩交叉渐变的AnimateSharedLayout，所以当我没有确定动画本身时，打乱safeToRemove的时间有点奇怪，但如果你自己为模态设置动画，我认为如果你将setTimeout函数中的时间与动画的长度同步，它应该能解决你的问题。

我仍在努力弄清楚这一切是如何工作的，所以请回复并告诉我你的发现，我们将离掌握Framer v2的最新工具又近了一步。