react-router not waiting for animation before changing route

Question

A sample jsfiddle is here that demonstrates my problem.

Hello and World links change the routes. The animation has been applied on Hello route when it leaves. Actually, the transition is set up such that when the Hello page leaves, it asks it child component <h1> to animate in its own componentWillLeave, completing which it can unmount happily. I did this because in my real app, when the Hello page leaves, its child components are required to animate in different ways - so its not a single transition for the full page.

To see the problem, click on Hello to load Hello page. Then click on World link for the World page. You will see that the World page is loaded even while the Hello is animating.

So how do I make the World wait for the animation to complete? Another thing I want to confirm is if the approach I employed to make the child component animate before the parent component leaves is correct or not.

For reference, I am using the latest react-router in master branch: 1.0b4

Answer 1

OK. After wading through a lot of latest as well as outdated docs, I managed to work this out. Here is the solution

Basically, react-router concerns itself only with the animation of parent container. But that means that using ReactTransitionGroup, we could hook into componentWillLeave method in the exiting component, where we can make individual children manipulate. Thus, changing a page would automatically animate the children through the hook.

The setTimeout in the solution may seem like a hack, but that's all I have been able to do for now.