ReactCssTransitionGroup 是react官方提供的css插件库,为不同生命周期下的组件添加类名标识,然后通过这些类名,就可以添加自定义动画
阶段划分
appear
首次渲染加载加载时,ReactCssTransitionGroup
内的子组件将会被添加appear
appear-active
的类名
enter
首次渲染加载之后,当又有新的组件被添加到ReactCssTransitionGroup
内的时候,改组件将会被添加enter
enter-active
的类名
leave
当元素从ReactCssTransitionGroup
内被卸载的时候,改元素将会被应用leave
leave-active
的类名
注意事项
ReactCssTransitionGroup
支持指定wrap组件的类型(通过props属性:component来指定),可以是dom元素如div,也可以是用户自定义组件。该组件必须优先被渲染到dom中去,其子组件才会被应用上不同生命周期下的css 类名。也就是说,在首次渲染的时候,wrap组件是不会被应用appear类名的,而且在卸载的时候,如果wrap组件被连同卸载,这时候leave是失效的。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>
;
}
}