react-spring 为开关盒设置动画

【问题标题】：react-spring Animating a switch casereact-spring 为开关盒设置动画
【发布时间】：2019-01-28 21:30:05
【问题描述】：

一个星期以来我一直在努力解决这个问题。我正在使用react-spring 在页面之间创建过渡动画。这些页面由在 React 组件的渲染中调用的 switch case 定义。

我用奇怪的行为快速制作了一个过于简单的沙盒：

https://codesandbox.io/s/50y5kkljz4

大部分代码是对我更复杂的堆栈的模拟。寻找任何建议以及我缺少的东西。

这是 react-spring 的错误吗？

我是否在做一些在 React 中不能做的事情？

甚至可以在（切换）案例之间制作动画吗？

要尝试的事情：

[第 71 行] 注释掉转换组件中的键。看看结果如何。
[第 74 行] 注释掉 Transition 组件中的 leave 属性。查看结果。

Full API reference for react-spring

提前致谢！

【问题讨论】：

标签： reactjs animation switch-statement transition react-spring

【解决方案1】：

您需要进行细微的调整。您正在向<Transition> 传递以下形式的函数：

function(styles) {
  return <div styles={styles}>getComponent(...)</div>;
}

您正在推迟解析确切的组件，直到函数被评估。

当<Transition> 重新渲染时，前一个函数和当前函数都将评估为由当前index 给出的相同组件，您会看到这种效果。

相反，你可以做的是：

    <Transition
      keys={this.state.index}
      from={{ opacity: 0 }}
      enter={{ opacity: 1 }}
      leave={{ opacity: 0 }}
    >
      {wrap(this.selectContent(type))}
    </Transition>

地点：

const wrap = cmp => styles => <div style={styles}>{cmp}</div>

即给定一个实际组件，返回一个函数，该函数采用react-spring 样式并将它们放置在包装器 div 上。

我希望这会有所帮助！

【讨论】：