javascript - React CSSTransitionGroup: コンポーネントが計画どおりに消えない

Question

クリック可能なコンテンツ ウィンドウを作成しようとしています。クリックすると、ウィンドウが変わります。画面上のコンテンツをフェードアウトさせ、新しいコンテンツをフェードインさせたいと思います。これまでのところ、フェードインは完了しています (と思います)。フェードアウトが思い通りにいかない。コンポーネントは画面に押し込まれ、その後フェードすることもなく消えます。必要に応じて、ライブ バージョンを GitHub ページにアップロードできます。

この投稿を読んだのですが、React バージョンが問題を引き起こしているのかどうかわかりません。そうじゃないって言いたいの？

とにかく、メインウィンドウのレンダリング機能は次のとおりです。

  render: function() {
    if (this.state.window == 'main-window') {
      var result = 
        <div key={'main'} className='contentWindow'>
          <PortalBox portalType={'dev'} handleClick={this.changeToDev}/>
          <PortalBox portalType={'personal'} handleClick={this.changeToPersonal}/>
        </div>;
    } else if (this.state.window == 'dev-window') {
      var result = <DevWindow key={'dev'} handleClick={this.changeToMain}/>;
    } else {
      var result = <PersonalWindow key={'personal'} handleClick={this.changeToMain}/>;
    }
    return (
      <div>
        <Greetings brands={this.props.brands}/>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
          {result}
        </ReactCSSTransitionGroup>
        <Footer/>
      </div>
    );
  }

CSS は次のとおりです。

.contentWindow {
  width: 100%;
  height: 450px;
  transition: opacity 1000ms ease-in;
}

.example-appear {
  opacity: 0.01;
}

.example-appear .example-appear-active {
  opacity: 1;
}

.example-enter {
  opacity: 0.01;
}

.example-enter .example-enter-active {
  opacity: 1;
  /*transition: opacity 1000ms ease-in;*/
}

.example-leave {
/*  visibility: hidden;
  height: 0px;
  width: 0px;*/
  opacity: 1;
}

.example-leave .example-leave-active {
  opacity: 0.01;
  /*transition: opacity 1000ms ease-in;*/
}

.example-leave の下にある可視性のコメントを外すと、2 つのパネルのうちの 1 つが非表示になりますが、両方は非表示になりません。

私はこのガイドに従っています。

何か案は？両方のパネルを非表示にするには、可視化を行う必要がありますか? それとも、まったく別のアプローチを試す必要がありますか? ありがとうございました！