CODEWITHSUNDEEP
reactjsreact-routerreactcsstransitiongroup
Julien Vincent
Julien Vincent

Reputation: 1238

react-router transition animation on initial page load

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})
            )
        )
    }
}

Upvotes: 3

Views: 3059

Answers (1)

Julien Vincent
Julien Vincent

Reputation: 1238

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

Upvotes: 2

Related Questions