ReactTransitionGroup simultaneous transitions

Question

I want to fade-out an element and simultaneously side-in a new element. Both elements have the same parent and occupy the same space - the one is replacing the other.

I'm using TransitionGroup and Transition for this.

The problem I'm having is that the transitions execute sequentially -- one after the other and I want them to both run simultaneously.

Looking at the Performance tab in DevTools it appears their entered & exited states fire at the same time. So I suspect this is a misunderstanding of how CSS transitions work.... but I figured I'd start here in the event that TranstionGroup is "scheduling" the transitions based on specified durations.

The following is some psuedo-code. Everything works great -- except I want the transitions to run in parallel.

const step1TransitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 }
};

const step2TransitionStyles = {
  entering: { transform: 'translateX(100%)' },
  entered: { transform: 'translateX(0)' },
  exiting: { transform: 'translateX(100%)' }
};

....

<div
  style={{
    position: 'fixed',
    top: 0,
    right: 0,
    height: 400,
    width: 400,
    zIndex: 10,
    backgroundColor: '#ccc'
  }}
>
  <TransitionGroup appear={true}>
    {this.state.step === 1 &&
      <Transition key='1' in={true} timeout={duration}>
        {(state) => (
          <div style={{
            transition: `opacity ${duration}ms ease-in-out`,
            opacity: 0,
            backgroundColor: '#8787d8',
            position: 'absolute',
            top: 0, left: 0,
            bottom: 0, right: 0,
            ...step1TransitionStyles[state]
          }}>
            Step #1
            <br />
            <button onClick={this.handleStep1Next}>Next</button>
          </div>
        )}
      </Transition>
    }
    {this.state.step === 2 &&
      <Transition key='2' in={true} timeout={duration}>
        {(state) => (
          <div style={{
            transition: `transform ${duration}ms ease-in-out`,
            backgroundColor: '#8787d8',
            position: 'absolute',
            top: 0, left: 0,
            bottom: 0, right: 0,
            ...step2TransitionStyles[state]
          }}>
            Step #2
            <br />
            <button onClick={this.handleStep2Back}>Back</button>
          </div>
        )}
      </Transition>
    }
  </TransitionGroup>
</div>