reactjs - ReactCSSTransitionGroup が機能しない

Question

親コンポーネントに次のコードがあります-デフォルトではModule1が表示され、クリックするとmodule2に置き換えられます-このロジックを配置して、module2がトグルするときに基本的なフェードイン/アウトを追加しようとしますが、トランジションは行います起こりません..ここで何が欠けていますか??

<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          <div className="container" onClick={this.onClick.bind(this)}>
            <span>
              <a> link
              </a>
            </span>
            {this.state.showModule ? <Module2 /> : <Module1 />}
          </div>
          </ReactCSSTransitionGroup>

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

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

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

.example-appear {
  opacity: 0.05;
  transition: opacity .5s ease-in;
}

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