css - ReactCSSTransitionGroup のアニメーションが機能しない

Question

ReactCSSTransitionGroup で動作する -leave アニメーションを取得できません。次のコードがあります。

<ReactCSSTransitionGroup
  transitionName="fader"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}>
  {React.cloneElement(children, {
    key: pathname
  })}
</ReactCSSTransitionGroup>

次のスタイルで:

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-leave {
  opacity: 1;
}
.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

DOM を見ると、-enter と -leave の両方のスタイルがルートの変更に適用されていますが、アニメーション化されているのは -enter スタイルだけです。ルート間ですばやくクリックすると、出発アニメーションが表示されますが、以前のルートの場合です。つまり、A -> B -> A に移動すると、A に戻ったときに、退出アニメーションが短時間ちらつきます。