0

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

我用奇怪的行为做了一个简单的沙箱：

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

这段代码大部分是对我更复杂的堆栈的模拟。寻找任何建议和我所缺少的。

这是来自 react-spring 的错误吗？

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

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

要尝试的事情：

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

react-spring 的完整 API 参考

提前致谢！

4

1 回答 1

0

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

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

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

在<Transition>重新渲染时，前一个函数和当前函数都将评估为相同的组件，由 current 给出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 上。

我希望这有帮助！

于 2018-08-22T16:23:51.917 回答