javascript - 使用 React-spring 为有条件渲染的组件设置动画的问题

Question

我是 react-spring 的新手。每当组件卸载时，我都无法为其设置动画。我有一个带有 onClick 处理程序的简单卡片，负责有条件地显示我的 Overlay 组件。安装时动画工作正常(从＆输入工作)，但是当关闭覆盖时，组件只是消失而没有动画(离开不起作用)。我怀疑这是因为组件的条件渲染，但我一直在努力寻找解决方案。任何帮助将不胜感激!

我当前的代码: https://codesandbox.io/s/dry-leftpad-h3vmv
我想要实现的目标: https://codesandbox.io/s/048079xzw

附言后者使用 mauerwerk 的库。我不想使用它。

Answer 1

你错过的是这个:

return expand.map(({ item, props, key }) => (
  item && <animated.div
  // ...etc

当您使用 useTransition 控制单个组件的安装时，您需要根据传递的 item 有条件地呈现它。在您的情况下，当它为 false 时，它不会呈现(如果已经安装，它将卸载)，当它为 true 时，它将呈现(如果卸载则安装)。

这是一个从您的沙箱中派生出来的工作沙箱:https://codesandbox.io/s/infallible-agnesi-cty5g .

更多信息

useTransition 的第一个参数是您要转换的列表。它会监视变化并发回一个与每个项目映射的数组、一个键和一个基于项目是真实的(进入)还是虚假的(离开)的样式对象 (props)。因此，对于安装/卸载单个元素的过渡，基于项目真实性的条件渲染是关键。

查看 the examples again here您会看到转换列表、两个元素之间的切换和单个项目之间的区别。

对于列表，不需要检查项目是否存在，因为数组改变了。

为了在两个元素之间切换，您使用 item 的真实性来确定要呈现哪个元素。

对于单个元素，item 决定是否渲染。这意味着当您默认为 false 时它最初不会挂载，并且将确保您不会在 isActive 值更改时呈现 2 个项目。