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

Question

我的目标是让一个图标旋转 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

Answer 1

原因是loading在退出动画生效前变成了false

您需要移除条件渲染。
更改 CSS 所有转换 "sits" 相互叠加

工作沙箱： https://codesandbox.io/s/coin-state-indicator-elutx

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

React-transition-group Transition doesn't trigger animation on exit

css

reactjs

animation

react-transition-group