如何才能最好地实施此React Transition？

Question

我正在尝试创建一个易于使用的UI / UX选择系统。

基本上，在视口中，我首先有3个“难度”组件，可以选择你想要的“难度级别”。

点击后，他们应该转换到下一个选择阶段，即“男性”或“女性”。

单击此按钮可将难度级别组件移动/移除到左侧（视口外），并将性别选择移动到视口中。

我该如何实现？

我还计划在将来实施“返回”功能，以便用户可以来自Difficulty和Sex组件。

我的想法

1. 单击按钮后，我只使用CSS将难度分量转换出视口，将“性”组件转换为视口。转换后，我将该组件display: none提供给用户完全删除。

担心：这似乎不高效。我应该完全删除组件吗？如果是这样，人们会从哪里开始这样做？

1. 另一种方法是根据需要删除/添加组件...我认为需要使用ComponentDidMount()和ComponentDidUnmount()函数，然后使用React Transition Group库以某种方式转换它们出来吗？

这是一张来自我自己的优秀，毕加索式的手绘例子：

Answer 1

如何进行过渡 通常，设置display: none会停止任何您不想做的动画。

export default class Modal extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return (
      nextProps.show !== this.props.show ||
      nextProps.children !== this.props.children
    );
  }

  render() {
    const { show, children } = this.props;
    return (
      <div
        style={{
          transform: show ? 'translateY(0)' : 'translateY(-100vh)',
          opacity: show ? 1 : 0,
        }}
      >
        {children}
      </div>
    );
  }
}

请注意，从shouldComponentUpdate返回false将停止重新渲染模态及其子项 children可能是任何事情或什么也不是。因此，当您不想显示它时，渲染一个空的div外部视图窗口非常有效。

钥匙外卖

• display: none大部分时间都不需要。它不支持动画，渲染函数可以返回<div />或null。

• 当接收到新道具或更新状态时，无论显示类型和窗口位置如何，React组件都将重新渲染。

• 确保对rendering lifecycle有清楚的了解，并非setState的所有装载/更新功能，您可以停止手动重新渲染。