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.

Lida

here try this fiddle,i changed the time of .enter.enteractive to 2000 jsfiddle.net/dcfsyre2 so could you explain the problem you are facing? or could you post a fiddle and explain the problem – Send

I doubt it is because of the location where you import your css styles. Try importing your css files in some root module to make it effect as early as possible. – Epitasis

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

Turbosupercharger