ReactCssTransitionGroup的应用

ReactCssTransitionGroup 是react官方提供的css插件库，为不同生命周期下的组件添加类名标识，然后通过这些类名，就可以添加自定义动画

阶段划分

appear

首次渲染加载加载时，ReactCssTransitionGroup内的子组件将会被添加appear appear-active 的类名

enter

首次渲染加载之后，当又有新的组件被添加到ReactCssTransitionGroup 内的时候，改组件将会被添加enter enter-active 的类名

leave

当元素从ReactCssTransitionGroup 内被卸载的时候，改元素将会被应用leave leave-active 的类名

注意事项

1. ReactCssTransitionGroup 支持指定wrap组件的类型（通过props属性：component来指定），可以是dom元素如div，也可以是用户自定义组件。该组件必须优先被渲染到dom中去，其子组件才会被应用上不同生命周期下的css 类名。也就是说，在首次渲染的时候，wrap组件是不会被应用appear类名的，而且在卸载的时候，如果wrap组件被连同卸载，这时候leave是失效的。
2. appear leave 和 enter 不同状态下的类名标识，只会被添加到wrap 组件转为DOM节点后的，第一级子DOM节点，示例代码：

//示例一：这时候，appear leave enter将会被应用到`clss=three`的div上
export default class TodoList extends React.Component {
       render() {
        const items = this.state.items.map((item, i) => (
            <div key={i} onClick={() => this.handleRemove(i)}>
                {item}
            </div>
        ));
        return <div>
            <button onClick={this.handleAdd}>Add Item</button>
            <ReactCSSTransitionGroup
                component={Com}
                transitionName="example"
                transitionAppear={true}
                transitionAppearTimeout={100000}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}>
                <div className="three">
                <div>
                   {items}                    
                </div>
                </div>
            </ReactCSSTransitionGroup>
        </div>
            ;
    }
}
//attention:在自定义组件的内部，不要忘记写props.children 来传递子组件
function Com(props){
    return <div className='one'><div className='two'>{props.children}</div></div>
}

//示例2：这时候，类名将被应用到class为one的div上
export default class TodoList extends React.Component {
       render() {
        const items = this.state.items.map((item, i) => (
            <div key={i} onClick={() => this.handleRemove(i)}>
                {item}
            </div>
        ));
        return <div>
            <button onClick={this.handleAdd}>Add Item</button>
            <ReactCSSTransitionGroup
                component='div'
                transitionName="example"
                transitionAppear={true}//默认为false,要显式指定
                transitionAppearTimeout={100000}
                transitionEnterTimeout={500}//默认为true，
                transitionLeaveTimeout={300}>//默认为true
                <div className="one">
                <div>
                   {items}                    
                </div>
                </div>
            </ReactCSSTransitionGroup>
        </div>
            ;
    }
}

示例