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

Question

我是新来的React Spring。每当卸载组件时，我都无法制作动画。我有一张带有onClick处理程序的简单卡片，负责有条件地显示我的Overlay组件。挂载时动画效果很好（从＆输入起作用），但是当关闭覆盖时，该组件只是消失而没有动画（离开不起作用）。我怀疑这是由于组件的条件渲染而引起的，但是我一直在努力寻找针对该组件的一种解决方案。任何帮助将不胜感激！

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

P.S。后者正在使用mauerwerk的lib。我不想使用它。

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个项目。