Puede hacerlo con ReactCSSTransitionGroup como se indica en esta sección

tu CSS:

 .example-enter { opacity: 0.01; } .example-enter.example-enter-active { opacity: 1; transition: opacity 500ms ease-in; } .example-leave { opacity: 1; } .example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; }

Se verá así:

 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; class MyComponent extends Component { constructor (props) { super(props) this.state = { currentComponent: 1, numberOfComponents: 2} } componentWillMount() { setInterval(() => { if(this.state.currentComponent === 2) { this.setState({currentComponent: 1}) } else { this.setState({currentComponent: this.state.currentComponent + 1}) } }, 5000) } render(){ let currentComponent = null; if(this.state.currentComponent === 1) { currentComponent = <ComponentOne/>; } else { currentComponent = <ComponentTwo/>; } return( <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> {currentComponent} </ReactCSSTransitionGroup> ) } }