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>
    );
}

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

1 个答案: