CSSTransitionGroup

Question

我们正在开发一个具有一些具有挑战性的动画要求的项目。我们正在尝试在CSS中制作动画，而不是让JS参与动画工作。例如，我们有以下组件（为简洁起见而简化）：

    var mainMenu = React.createClass({
    mixins: [PureRenderMixin],
    render: function () {
        var _this = this;
        var currItem;
        var items = this.props.itemList.map(function (item) {
            if (!item.get('isOpen')) {
                currItem = <MainMenuClosed key={item.get('MenuItemId')}
                                           menuTypeId={item.get('MenuTypeId')}
                                           title={item.get('ItemTitle')}
                                           text={item.get('ItemText')}
                                           imageUrl={item.get('ImageId')}
                                           clickHandler={_this.props.closedClickHandler} />;
            } else {
                currItem = <MainMenuOpen menuTypeId={item.get('MenuTypeId')}
                     key={item.get('MenuItemId')}
                                         clickHandler={_this.props.openClickHandler}
                                         items={item.get('children')}
                                          />;
            }

            return (
                currItem
            );
        })
        return (
             <ReactCSSTransitionGroup component="div" className="row" transitionName="mainMenuItems">
                {items}
            </ReactCSSTransitionGroup>
        );
    }
});

当单击菜单项时，将调用一个操作，该操作从服务器获取一些内容并将其发送到商店。问题是，一旦重新渲染发生，离开组件就会淡出，例如，输入组件会同时淡入。我想让离开组件完成其动画序列，然后让进入的菜单项开始动画。是否有内置的方法来创建这样的序列？