Javascript React CSTRANSTIONGROUP:组件未按计划消失

我正在尝试制作一个可点击的内容窗口。单击后，窗口将更改。我希望屏幕上的内容淡出，新内容淡入。到目前为止，我已经完成了淡入（我想）。淡出将无法按计划工作。这些组件被推下屏幕，然后消失，甚至不会褪色。如果需要，我可以上传一个实时版本到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>
    );
  }

当我取消注释.example leve下的可见性内容时，我会使两个面板中的一个消失，但不是两个都消失

我正在关注这个

有什么想法吗？我应该试着做可见性的东西，使两个面板消失吗？还是我应该尝试一种完全不同的方法？谢谢大家!

.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;*/
}