Simple example showing how React's ReactTransitionGroup works (sort of)

ReactTransitionGroup-example.js

import React, { PropTypes } from 'react';
import ReactTransitionGroup from 'react/lib/ReactTransitionGroup';

/**
 * An Item... to Transition!
 */ 
const TransitionItem = React.createClass({
  getInitialState() {
    return {
      opacity: 0.0,
    }
  },

  componentWillAppear(done) {
    console.log('componentWillAppear', arguments);
    done();
  },

  componentDidAppear() {
    console.log('componentDidAppear', arguments);
  },

  componentWillEnter(done) {
    const interval = setInterval(() => {
      this.setState({opacity: this.state.opacity + 0.05}, () => {
        if (this.state.opacity >= 1.0) {
          clearInterval(interval);
          done();
        }
      })
    }, 50);
  },

  componentDidEnter() {
    console.log('componentDidEnter', arguments);
  },

  componentWillLeave(done) {
    const interval = setInterval(() => {
      this.setState({opacity: this.state.opacity - 0.05}, () => {
        if (this.state.opacity <= 0) {
          clearInterval(interval);
          done();
        }
      })
    }, 50);
  },

  componentDidLeave() {
    console.log('componentDidLeave', arguments);
  },

  render() {
    return (
      <div style={this.state}>
        {this.props.children}
      </div>
    );
  }
});

export const TransitionList = React.createClass({
  render() {
    const { children } = this.props;

    return (
      <ReactTransitionGroup>
        {React.Children.map(children, (child) => {
          return <TransitionItem>{child}</TransitionItem>
        })}
      </ReactTransitionGroup>
    )
  }
});