1

我有一个交换子组件的组件（这是一个小测验，子组件是问题。我正在尝试使用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;
}

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

4

1 回答 1

2

我认为这是由于缺失transitionEnterTimeout以及transitionLeaveTimeout它们确定 *-active 类保持应用的时间。

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

render() {
    return (
        <div className=" questions-container">
           <ReactCSSTransitionGroup 
               transitionName="switch"
               transitionEnterTimeout={500}
               transitionLeaveTimeout={500}
           >
              {this.renderQuiz(step)}
          </ReactCSSTransitionGroup>
        </div>
    );
}
于 2017-03-16T06:47:45.037 回答