React Router - How do I achieve a leaving-the-page animation?

Question

Using ReactCSSTransitionGroup for animations work great, until I get React Router involved.

Changing states is instantaneous, leaving no time to animate something out before proceeding to the next state.

When entering a new state, the normal ReactCSSTransitionGroup syntax works, because new components are getting mounted.

What I'd like to do is timeout the changing of states for just 500ms, unmount the component, triggering ReactCSSTransitionGroup's normal transitions.. then allow the state change to proceed to the next state...

The only way I can prevent the changing of states is routerWillLeave - but I can only seem to return true or false... not delaying... then returning true. Could I return some sort of promise?

Here's the code I'm using:

Simple react Login Form code

Thanks!

Answer 1

You can't do this with routerWillLeave; analogous to native leave hooks, you can only attempt to block the transition synchronously.

The React Router repo includes a worked example of how to handle animations that keep the previous rendered component in its last state: https://github.com/rackt/react-router/tree/v1.0.0-rc4/examples/animations. You'll need to follow this pattern to accomplish what you want.