reactjs - 関数を使用してコンポーネントを出力すると、React トランジション グループが機能しない

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