使用 React-spring 为有条件渲染的组件设置动画的问题
Issues on animating a conditionally rendered component using React-spring
我是 react-spring 的新手。每当组件卸载时，我都无法为其设置动画。我有一个带有 onClick 处理程序的简单卡片，负责有条件地显示我的 Overlay 组件。安装时动画工作正常（从＆输入工作），但是当关闭覆盖时，组件只是消失而没有动画（离开不起作用）。我怀疑这是因为组件的条件渲染，但我一直在努力寻找解决方案。如有任何帮助，我们将不胜感激！
我现在的代码： https://codesandbox.io/s/dry-leftpad-h3vmv
我想要实现的目标： https://codesandbox.io/s/048079xzw
P.S。后者使用 mauerwerk 的库。我不想用那个。
你错过的是：
return expand.map(({ item, props, key }) => (
item && <animated.div
// ...etc
当您使用 useTransition 控制单个组件的安装时，您需要根据传递的 item 有条件地渲染它。在你的情况下，当它是 false 时它不会渲染（如果已经安装它将卸载）并且当它是 true 时它将呈现（如果卸载则安装）。
这是一个从你的沙箱中派生出来的工作沙箱：https://codesandbox.io/s/infallible-agnesi-cty5g。
多一点信息
useTransition 的第一个参数是您要转换的列表。它会监视变化并发回一个与每个项目映射的数组、一个键和一个基于项目是真（进入）还是假（离开）的样式对象 (props)。因此，对于 mounts/unmounts 单个元素的过渡，基于项目真实性的条件渲染是关键。
查看 the examples again here，您会看到转换列表、两个元素之间的切换和单个项目之间的区别。
对于列表，不需要检查项目是否存在，因为数组改变了。
为了在两个元素之间切换，您使用 item 的真实性来确定要呈现哪个元素。
对于单个元素，item 决定是否渲染。这意味着当您默认为 false 时它最初不会挂载，并且将确保您不会在 isActive 值更改时呈现 2 个项目。
我是 react-spring 的新手。每当组件卸载时，我都无法为其设置动画。我有一个带有 onClick 处理程序的简单卡片，负责有条件地显示我的 Overlay 组件。安装时动画工作正常（从＆输入工作），但是当关闭覆盖时，组件只是消失而没有动画（离开不起作用）。我怀疑这是因为组件的条件渲染，但我一直在努力寻找解决方案。如有任何帮助，我们将不胜感激！
我现在的代码： https://codesandbox.io/s/dry-leftpad-h3vmv
我想要实现的目标： https://codesandbox.io/s/048079xzw
P.S。后者使用 mauerwerk 的库。我不想用那个。
你错过的是：
return expand.map(({ item, props, key }) => (
item && <animated.div
// ...etc
当您使用 useTransition 控制单个组件的安装时，您需要根据传递的 item 有条件地渲染它。在你的情况下，当它是 false 时它不会渲染（如果已经安装它将卸载）并且当它是 true 时它将呈现（如果卸载则安装）。
这是一个从你的沙箱中派生出来的工作沙箱：https://codesandbox.io/s/infallible-agnesi-cty5g。
多一点信息
useTransition 的第一个参数是您要转换的列表。它会监视变化并发回一个与每个项目映射的数组、一个键和一个基于项目是真（进入）还是假（离开）的样式对象 (props)。因此，对于 mounts/unmounts 单个元素的过渡，基于项目真实性的条件渲染是关键。
查看 the examples again here，您会看到转换列表、两个元素之间的切换和单个项目之间的区别。
对于列表，不需要检查项目是否存在，因为数组改变了。
为了在两个元素之间切换，您使用 item 的真实性来确定要呈现哪个元素。
对于单个元素，item 决定是否渲染。这意味着当您默认为 false 时它最初不会挂载，并且将确保您不会在 isActive 值更改时呈现 2 个项目。