staggeredTransitionGroup.js

import React, {PropTypes} from 'react';
import TransitionGroup from '../transitionGroup';

class StaggeredTransitionGroup extends React.Component {
  constructor(props) {
    super(props);  
    this.state = {
      count: 0
    };
  }

  getTotal() {
    return React.Children.count(this.props.children);
  }

  getInterval() {
    return this.props.totalTime / this.getTotal();
  }

  componentDidMount() {
    this.interval = setInterval(::this.updateCount, this.getInterval());
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  updateCount() {
    let {count} = this.state;
    const total = this.getTotal();

    if (++count === total) {
      clearInterval(this.interval);
    } 

    this.setState({count});
  }

  render() {
    const {count} = this.state;
    const {children, ...props} = this.props;

    const childrenToShow = _.take(children, count);

    return (
      <TransitionGroup {...props}>
        {childrenToShow}
      </TransitionGroup>
    );
  }
}

StaggeredTransitionGroup.propTypes = {
  totalTime: PropTypes.number 
};

StaggeredTransitionGroup.defaultProps = {
  totalTime: 400
};

export default StaggeredTransitionGroup;

nice!