javascript - React, transition group - 交换组件时的 css 转换

Question

我有一个组件可以交换子组件(这是一个小测验，子组件是问题。我正在尝试使用 ReactCSSTransitionGroup 为组件交换设置动画。

所以，我有一个渲染组件的函数，我在 ReactCSSTransitionGroup 中交换包装，就像这样:

render() {
  return (
    <div className=" questions-container">
      <ReactCSSTransitionGroup transitionName="switch">
        {this.renderQuiz(step)}
      </ReactCSSTransitionGroup>
    </div>
  );
}

renderQuiz 函数只是一个 switch 语句，它根据正确的状态返回正确的组件 - 像这样:

renderQuiz(step) {
  switch (step) {
    case 0:
      return (
        <StepZero />
      );
    case 1:
      return (
        <StepOne />
      );
    ....
  }
}

Step 只是一个局部组件变量(this.state.step)。我看到这只是部分工作 - 当第一个组件加载时我看到它淡入，但切换组件之间没有转换。

这是与转换关联的 CSS:

.switch-enter {
  opacity: 0.01;
}

.switch-enter.switch-enter-active {
  opacity: 1.0;
  transition: opacity 500ms ease-in;
}

.switch-leave {
  opacity: 1.0;
}

.switch-leave.switch-leave-active {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

不确定如何让它正常工作。任何投入将不胜感激。谢谢!

Answer 1

我认为这是由于缺少 transitionEnterTimeout 和 transitionLeaveTimeout，因为它们决定了 *-active 类保持应用的时间。

我认为它们默认为零，这在视觉上意味着没有过渡，因为您的过渡 CSS 在 -active 类中。

render() {
    return (
        <div className=" questions-container">
           <ReactCSSTransitionGroup 
               transitionName="switch"
               transitionEnterTimeout={500}
               transitionLeaveTimeout={500}
           >
              {this.renderQuiz(step)}
          </ReactCSSTransitionGroup>
        </div>
    );
}