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>            ;    }}

示例