3

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

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

PS 后者使用的是 mauerwerk 的 lib。我不想用那个。

4

1 回答 1

1

您缺少的是：

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

当您使用 控制单个组件的安装时useTransition，您需要根据item传递的内容有条件地渲染它。在您的情况下，false它不会渲染（如果已经安装，它将卸载）并且true它会渲染（如果卸载则安装）。

这是一个从你那里分叉出来的工作沙箱：https ://codesandbox.io/s/infallible-agnesi-cty5g 。

更多信息

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

再次查看此处的示例，您将看到转换列表、两个元素之间的切换和单个项目之间的区别。

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

对于两个元素之间的切换，您使用真实性item来确定要渲染的元素。

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

于 2019-09-16T05:48:37.860 回答