React Router Transition Animation missing timeout

Question

My code is very similar to the example in the official React-Router git repo.

Here is a codepen that shows the problem.

Here is the problem: Instead of waiting for the time specified in the transitionEnterTimeout attribute, the new element is rendered immediately. Then both css animations (enter and leave) run at the same time. After that the previous element gets removed.

I have the same problem locally on a bit more complex setup, that's why I made the simple codepen to see where the problem lies.

I am using the latest versions of all the frameworks (react, react-router, react-addons-css-transition-group)

const App = ({children, location}) => {
    return (
        <ReactCSSTransitionGroup
            component="div"
            transitionName="app"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
        >
            {children && React.cloneElement(children, {
                key: location.pathname,
            })}
        </ReactCSSTransitionGroup>
    );

Answer 1

The transitionEnterTimeout does not describe how long to delay before starting the transition. Its value represents how much time to wait before removing the .<name>-enter class from the node.

If you want the enter transition to be delayed, you will need to add a delay to the transition in your CSS.

transition: $type $time $mode $delay;

You will also need to extend the transitionEnterTimeout by the length of the delay.

transitionEnterTimeout={1000}