react-router transition animation on initial page load

Question

I would like to apply animations to components when I transition with react-router, and I am able to do this only after the initial load, however I want to see the animation on the initial mount as well (page refresh).

This is what I have tried. Note transitionAppear: true did not do anything:

class App extends Component {

    constructor() {

        super();
    }

    render() {

        let path = this.context.router.getCurrentPath();
        path = path.substring(0, path.split('/', 2).join('/').length);
        return (
            Transitions({component: 'div', transitionName: 'fade', transitionAppear: true},
                handler({key: path})
            )
        )
    }
}

For now it is just client side. This shouldn't make a difference though? — Julien Vincent, Aug 19 '15 at 17:34
I'm doing some transitions, and if the page is loaded server side it never fires the appear event. Have you inspected the generated DOM to see if the classes are being added? — BradByte, Aug 19 '15 at 18:14
As far as I can see, no classes are being changed on initial load. After that as soon as I change the component rendered in the RouteHandler - animations work as expected — Julien Vincent, Aug 19 '15 at 18:18
When I used animations with initial mounting, I wasn't mounting in the correct order. I'm not familiar with your class structure, but maybe this might help. https://facebook.github.io/react/docs/animation.html#animation-group-must-be-mounted-to-work. — BradByte, Aug 19 '15 at 18:36
Oh - I did read the docs but I guess I did not read them propperly. I assumed that the `transitionAppear` triggers the `enter` css class. I created an `appear` class and animations performed as expected :) — Julien Vincent, Aug 19 '15 at 20:08

score 2 · Accepted Answer · answered Aug 19 '15 at 20:09

2

On a re-reading of react docs I realised that transitionAppear triggers its own css class (.appear). Adding this class fixed my problem.

answered Aug 19 '15 at 20:09

Julien Vincent

1,210
3
17
40

react-router transition animation on initial page load

1 Answers1