React，过渡组 - css 交换组件时的过渡

Question

我有一个组件可以交换子组件（这是一个小测验，子组件是问题。我正在尝试使用 ReactCSSTransitionGroup.

动画化组件交换

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

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

renderQuiz 函数只是一个 switch 语句，returns 正确的组件基于正确的状态 - 像这样：

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 classes 保持应用的时间。

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

上

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

React，过渡组 - css 交换组件时的过渡

React, transition group - css transitions when swapping components

html

javascript

css

reactjs

reactcsstransitiongroup