Question

我使用一个函数根据我的应用程序状态输出必要的组件。我尝试使用ReactCSSTransitionGroup为过渡添加动画。但它不会起作用。在我的主渲染中，我这样做：

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
  {this.signupForm()}
</ReactCSSTransitionGroup>

然后在signupForm函数内部：

signupForm() {
  const {signupType} = this.state;

  if (signupType === 'employer') {
    return (
      <SignupFormEmployerInfo />
    );
  } else {
    return (
      <div>
        <SignupFormEmployeeInfo />
        <SignupFormEmployeeSocialLinks />
      </div>
    );
  }
}

我的css：

知道如何使这项工作吗？

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Answer 1

刚刚找到答案！ React过渡组通过查看组件的key来检测更改。在我的例子中，我没有使用key。所以当我改变它时：

signupForm() {
  const {signupType} = this.state;

  if (signupType === 'employer') {
    return (
      <div key="1">
        <SignupFormEmployerInfo />
      </div>
    );
  } else {
    return (
      <div key="2">
        <SignupFormEmployeeInfo />
        <SignupFormEmployeeSocialLinks />
      </div>
    );
  }
}

它开始起作用了。

使用函数输出组件时，React过渡组不起作用

1 个答案: