0

我创建了一个动画模态容器，它在大多数情况下都可以正常工作，唯一的问题是在执行退出动画后需要一两秒才能卸载（在此期间无法单击其他任何地方）

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

查看问题

  • 单击显示模式按钮
  • 单击任意位置以关闭模式
  • 请注意，滚动条仍然存在，表示模式未卸载
  • 此外，您不能在退出动画后单击打开模态按钮立即重新打开模态（1 秒）

我看过safeToremove但不明白如何使用它，因为没有适当的文档

4

1 回答 1

0

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

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

import { usePresence } from "framer-motion"

export const Component = () => {
  const [isPresent, safeToRemove] = usePresence()

  useEffect(() => {
    !isPresent && setTimeout(safeToRemove, 1000)
  }, [isPresent])

  return <div />
}

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

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

它会破坏你的动画存在。

所以封装safeToRemove的 setTimeout 函数，其实就是决定 AnimatePresence 的核心功能，能够决定虚拟 DOM 再次变为可点击的时机等等。

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

我仍在试图弄清楚这一切是如何运作的，所以请回复评论并让我知道你发现了什么，我们将更接近掌握使用 Framer v2 的最新工具。

于 2020-09-16T18:58:56.250 回答