ReactCSSTransitionGroup with CSS Modules

Question

I have a ReactCSSTransitionGroup I'm using with CSS Modules (and dynamic routing from react-router but I believe this is working as expected).

<ReactCSSTransitionGroup
  component="div"
  transitionName={transitions}
  transitionAppear
  transitionAppearTimeout={1000}
  transitionEnterTimeout={2000}
  transitionLeaveTimeout={2000}
>
  {React.cloneElement(this.props.children, {
    key: location.pathname,
  })}
</ReactCSSTransitionGroup>

The appear and leave transitions work perfectly - but the enter transitions do not - they simply appear immediately, with the previous component fading out after the new component has entered.

The CSS (using CSS Modules):

.enter {
  opacity: 0.01;
}

.enter.enterActive {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.leave.leaveActive {
  opacity: 0.01;
  transition: opacity 2000ms ease-in;
}

.appear {
  opacity: 0.1;
  transition: opacity 1000ms ease-out;
}

.appearActive {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

--- EDIT ---

I discovered that it works as expected on child routes (I only have a small handful of those in my app). All routes including child routes are loaded dynamically, so I'm still not sure what causes it to work in those cases but not in others.

Answer 1

There are many bugs with CSS transitions at the browser level, and each type of transition has different dependencies(according to the docs)

Suggestion is to use a more developer friendly api:

• https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx
• https://github.com/tkafka/react-VelocityTransitionGroup/blob/master/VelocityTransitionGroup.jsx