Question

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

我用一种奇怪的行为快速制作了一个简单的沙箱：

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

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

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

我在React中做不对吗？

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

尝试的事情：

[第71行]注释掉过渡组件中的键。看看结果如何。
[第74行]注释掉过渡组件中的请假道具。查看结果。

Full API reference for react-spring

谢谢！

Answer 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上的函数。

我希望这会有所帮助！

react-spring动画开关盒

1 个答案: