React Spring 转换无法正常工作

Question

所以我查看了 React springs 文档，我确定我只是没有正确理解它。但我想从本质上尝试使 div 具有 enter 动画和某种触发器以使其成为 leave

我没有成功触发这个leave。我似乎无法理解是什么让它触发了休假功能。或者，也许我只是不理解一般的过渡，这是完全可能的。

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

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

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

本质上，我希望它首先出现在视图中，当我点击它时，触发 leave 规则并让它动画显示 none 和不透明度 0。

感谢任何帮助。

Answer 1

Transition基本功能是显示数组内容。如果你操纵数组，转换将随之而来。您可以添加、插入和删除元素并做出反应 spring 将负责每个项目的动画。

当您使用转换切换 on/of 具有布尔值的单个项目时。您必须修改渲染方法以在组件前面添加额外条件 (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

React Spring 转换无法正常工作

React Spring Transition not working properly

reactjs

react-spring