React-transition-group Transition 在退出时不会触发动画

我的目标是让一个图标旋转 90 度（变平），然后被另一个图标替换，创造一种硬币旋转效果。

然后我想在进入和退出时旋转（由于 XHR 调用有延迟）。

出于某种原因，动画在进入时触发，而不是在退出时触发。

这是3种边型，in状态是相互排斥的。

<div className={c.wrapper}>
  <Transition in={loading} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(loading) && <SyncIcon className={c.loadingIcon} />}
      </div>
    )}
  </Transition>
  <Transition in={success} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(success) && <SuccessIcon className={c.successIcon} />}
      </div>
    )}
  </Transition>
  <Transition in={fail} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(fail) && <FailIcon className={c.failIcon} />}
      </div>
    )}
  </Transition>
</div>

以下是样式定义：

const duration = 1000
const allTransitions = {
  appear: duration,
  enter: duration,
  exit: duration
}
const easingFunction = 'ease-in-out'

const defaultStyle = {
  transition: `transform ${duration}ms ${easingFunction}`,
  transform: 'rotateY(90deg)',
  alignSelf: 'center'
}

const transitionStyles = {
  entering: { transform: 'rotateY(0deg)' },
  entered: { transform: 'rotateY(0deg)' },
  exiting: { transform: 'rotateY(90deg)' },
  exited: { transform: 'rotateY(90deg)' },
}

这是一个演示：https : //codesandbox.io/s/coin-state-indicator-3bnv4