1.简单的过渡动画效果
import React,{Component,Fragment} from 'react';
import './App.css';
class App extends Component{
constructor(){
super()
this.state={
show:true
}
this.handleClick = this.handleClick.bind(this);
}
render(){
return(
<Fragment>
<div className = {this.state.show ? 'show':'hide'}><h1>Hello</h1></div>
<button onClick={this.handleClick}>toggle</button>
</Fragment>
)
}
handleClick = ()=>{
this.setState({
show:this.state.show?false:true
})
}
}
export default App;
2.使用react-transition-group实现动画
（1）先安装
npm install react-transition-group --save
（2）引入文件
import { CSSTransition} from 'react-transition-group';
（3）JS部分
render(){
return(
<Fragment>
<CSSTransition
in={this.state.show}
timeout={1000}//动画时长
classNames='fade'//动画名称
unmountOnExit//动画完成后DOM被移除
onEntered={(el)=>{el.style.color='red'}}//当入场动画执行完成，CSSTransition包裹的元素的颜色变为红色
appear = {true}//第一次进入页面也有动画效果
>
<div >Hello</div>
</CSSTransition>
<button onClick={this.handleClick}>toggle</button>
</Fragment>
)
}
（4）CSS部分
/* 入场动画 */
.fade-enter .fade-appear{
opacity: 0;
}
.fade-enter-active .fade-appear-active{
opacity: 1;
transition: opacity 1s ease-in;
}
.fade-enter-done{
opacity: 1;
}
/* 出场动画 */
.fade-exit{
opacity: 1;
}
.fade-exit-active{
opacity: 0;
transition: opacity 1s ease-in;
}
.fade-exit-done{
opacity: 0;
}
3.多个DOM元素的动画
import React,{Component,Fragment} from 'react';
import { CSSTransition,TransitionGroup} from 'react-transition-group';
import './App.css';
class App extends Component{
constructor(){
super()
this.state={
list:[]
}
this.handleClick = this.handleClick.bind(this);
}
render(){
return(
<Fragment>
<TransitionGroup>//写在所有的DOM元素的外部
{
this.state.list.map((item,index)=>{
return(
<CSSTransition//写在具体的DOM元素或者组件外部
timeout={1000}//动画时长
classNames='fade'//动画名称
unmountOnExit//动画完成后DOM被移除
onEntered={(el)=>{el.style.color='red'}}//当入场动画执行完成，CSSTransition包裹的元素的颜色变为红色
appear = {true}//第一次进入页面也有动画效果
key={index}
>
<div>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button onClick={this.handleClick}>toggle</button>
</Fragment>
)
}
handleClick(){
this.setState((prevState)=>{
return{
list:[...prevState.list,'item']
}
})
}
}
export default App;
