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

Question

My goal is to have an icon spin 90 degrees (become flat) and then to be replaced by another icon, creating a kind of coin-spin effect.

I want then to spin on enter and on exit (there is a delay because of an XHR call).

For some reason, the animation is triggered on enter, but not on exit.

Those are the 3 side types, the in state is mutually exclusive.

<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>

And here are the style definitions:

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)' },
}

Here is a demo: https://codesandbox.io/s/coin-state-indicator-3bnv4

score 0 · Accepted Answer · answered Mar 23 '20 at 07:54

The reason is that loading becomes false before the exit animation takes effect.

You need to remove the conditional rendering.
Change the CSS that all transitions "sits" on top of each other

working sandbox: https://codesandbox.io/s/coin-state-indicator-elutx

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

1 Answers1