我怎样才能最好地实现这个 React Transition？

WonkasWilly 发表于 Dev

旺卡斯威利

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

本质上，在视口上，我首先有 3 个“难度”组件，用于选择您想要的“难度级别”。

单击后，他们应过渡到下一个选择阶段，即“男性”或“女性”。

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

我将如何实现这一点？

我还计划在未来实现“返回”功能，以便用户可以在难度和性别组件之间来回切换。

我的想法

单击按钮后，我只需使用 CSS 将难度组件转换出视口，并将“性别”组件转换到视口中。转换后，我给该组件 adisplay: none以将其从用户中完全删除。

顾虑：这似乎效率不高。我应该完全移除组件吗？如果是这样，从哪里开始这样做？

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

这是我自己手绘的一个优秀的、类似毕加索的手绘示例：

FisNaN

有如何进行过渡。
通常，设置会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>
    );
  }
}

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

关键外卖