在项目中可能会有一些动画效果展示或是页面切换效果,css动画的方式,比较局限,涉及到一些js动画的时候没法处理了。react-transition-group是react的第三方模块,借住这个模块可以更方便的实现更加复杂的动画效果
- 安装
npm i -S react-transition-group
- 使用
state = {
show: true
}
//执行动画
handleToggole = () => {
this.setState({
show: !this.state.show,
})
}
render(){
return (
<CSSTransition
in={this.state.show} //控制动画是否入场,为true时,动画进场,为false时动画出场
timeout={1000} //动画执行时间
classNames={{
enter: 'animated',
enterActive: 'slideInLeft',
exit: 'animated',
exitActive: 'slideOutLeft'
}} //自定义的类名(定义动画效果,进场前,进场后直到结束,结束前,结束后)
unmountOnExit //可选属性,当动画出场后,在
>
<div>玩转React Transition</div>
</CSSTransition>
<button type="primary" onClick={this.handleToggole}>Animation</button>
)
}
在组件是引入动画库
css动画
- nimate.css动画库集成到react-transation-group动画模块中
通过cdn地址下载动画库
放到项目中的src/assets目录中
集成到CssTransation组件中