ReactCSSTransitionGroup having no effect

Question

I have integrated ReactCSSTransitionGroup, but am not getting an animation effect. Would appreciate tips on where the following structure is wrong:

import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import ReactCSSTransitionGroup = require('react-addons-css-transition-group')

...
return (
...
    <ReactCSSTransitionGroup
       transitionName = "mainpage"
       transitionEnterTimeout={ 500 }
       transitionLeaveTimeout={ 300 }>
       <Router key="router" history={ browserHistory }>
          <Route key="/" path="/" component={ App }>
             <IndexRoute key="MainTiles" component={ MainTiles } />
             <Route key="Page1" path="page1" component={ Page1 } />
          </Route>
       </Router>
    </ReactCSSTransitionGroup>
...
)

and my css is:

.mainpage-enter { opacity: 0; transition: opacity 100ms ease-in; }
.mainpage-enter.mainpage-enter-active { opacity: 1; transition: opacity 100ms ease-in; }
.mainpage-leave { opacity: 1; transition: opacity 100ms ease-in; }
.mainpage-leave.mainpage-leave-active { opacity: 0; transition: opacity 100ms ease-in; }

ha404 · Answer 1 · 2016-02-01T21:11:24.550

I believe the Components you want to have the transition lifecycle methods need to be the direct children of ReactCSSTransitionGroup.

For example:

<Router key="router" history={ browserHistory }>
    <Route key="/" path="/" component={ App }>
        <IndexRoute key="MainTiles" component={ MainTiles } />
        <Route key="Page1" path="page1" component={ Page1 } />
    </Route>
</Router>

Inside App.js:

class App extends Component {
    render() {
        return (
            <div>
                <ReactCSSTransitionGroup
                    component="div"
                    transitionName="example"
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={500}
                >
                    {React.cloneElement(this.props.children, {
                        key: this.props.location.pathname,
                    })}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
 }

score 0 · Accepted Answer · answered Feb 01 '16 at 21:13

never mind, I found some sample code that works:

class App extends Component<any, any> {
    render() {
        return (
            <div>
        <ReactCSSTransitionGroup
            component="div"
            transitionName="mainpage"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
            >
            { 
                React.cloneElement(this.props.children, {
                    key: this.props.location.pathname
                }) 
            }
        </ReactCSSTransitionGroup>

            </div>
        )
    }
}

Apparently the main requirement is direct parentage, together with the injection of a key for the animated components.

ReactCSSTransitionGroup having no effect

2 Answers2