Fading between pages with React and React Transition Group

Question

I'm trying to fade on entry and leave between pages in React using React Starter Kit.

Inspired by the post Applying React.js CSS Transitions on initial render I did this for the root component loaded by every page:

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import s from './About.less';

class About extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mounted: false,
        };
    }
    componentDidMount = () => {
        this.setState({
            mounted: true,
        });
    };
    render() {
        const child = this.state.mounted ? <h1>Hello world</h1> : null;

        return (
            <ReactCSSTransitionGroup
                transitionName="example"
                transitionAppear
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}
            >
                {child}
            </ReactCSSTransitionGroup>
        );
    }
}

export default withStyles(s)(About);

And in the css I have:

.example-appear {
  opacity: 0.01;
  transition: opacity 0.5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

When the component is mounted, the element is shown, but without any entering transition. Am I doing something wrong there?

Thanks!

Answer 1

Appear Transition will not be effective in/after ComponentDidMount().

If you want to see the transition after ComponentDidMount() use Enter/Leave transition.

In your case instead of componentDidMount() if you keep your code in componentWillMount() it will work fine. I have changed your code. Hope this helps.

class About extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        mounted: false
    };
}
componentWillMount ()  {
    this.setState({
        mounted: true
    });
};
render() {
    const child = this.state.mounted ? <h1>Hello world</h1> : null;

    return (
        <ReactCSSTransitionGroup
            transitionName="example"
            transitionAppear

        >
            {child}
        </ReactCSSTransitionGroup>
    );
}

}

For reference React Page Transition