React Spring Transition 无法正常工作

Question

所以我查看了 react springs 文档，我确定我只是没有正确理解它。但我想基本上尝试让一个 div 有一个 enter 动画和某种触发器来使它成为 leave

我未能成功触发此leave。我似乎无法理解是什么让它触发了离开功能。或者，也许我只是不理解总体上完全可能的过渡。

这个想法很简单，我希望能够触发一些东西进入视野，然后当其他事情发生时，触发它离开视野。

我从 react-spring 文档和made my own fork 中举了一个例子来说明我似乎误解了什么。

如果您转到此 codepen，然后单击显示框中的任意位置，您会注意到一些动画正在发生。根据我的理解，状态变量isTrue 应该告诉转换处于什么状态。所以如果它是错误的，我会假设这会触发离开。但它并没有离开，正如您从示例中看到的那样，它停留在enter 规则（显示为block，不透明度为1）。

基本上，我希望它最初出现在我的视野中，当我点击它时，触发leave 规则并让它动画化以显示无和不透明度为0。

感谢任何帮助。

Answer 1

Transition 基本函数用于显示数组的内容。如果您操纵数组，则转换将随之而来。您可以添加、插入和删除元素，react spring 会处理每个项目的动画。

当您使用转换打开/关闭具有布尔值的单个项目时。您必须修改您的渲染方法以在您的组件前面添加一个额外的条件 (item &&)。正如您在最后一个示例中看到的那样：https://www.react-spring.io/docs/hooks/use-transition

  {transitions.map(({ item, props, key }) => {
    const Page = pages[0]
    return item && <Page key={key} style={props} />
  })}

这是修改后的代码： https://codesandbox.io/s/xenodochial-buck-k40bj