React Transition Group in RSK

[ghost]

Hi all,

I'm trying to fade on entry and leave between pages in React in RSK

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? If I add the proper classes, will this fade out before leaving the page?

Thanks!