使用react-transition-group实现动画

在项目的根目录下安装依赖包
# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

安装完成引入react-transition-group包
import { CSSTransition ,TransitionGroup } from 'react-transition-group';

//用法： 在需要做动画的元素上包裹一个< CSSTransition></ CSSTransition>组件
//in={this.props.show} 的值改变会触发动画
//timeout ={2000} 动画执行多久
//classNames = 'fade'  css类名
//unmountOnExit dom会被移除
//apper={true} 第一次显示需要动画。需要在css文件中新增加类名
            <CSSTransition
            in={this.props.show}
            timeout ={2000}
            classNames = 'fade'
            unmountOnExit
            apper={true}
             >
            <div onClick={this.handelClick}>{content}</div>
            </CSSTransition>

//入场动画
.fade-enter,fade-appear {
    opacity: 0;
}
.fade-enter-active,fade-appear-active {
    opacity: 0.5;
    transition: opacity 1s ease-in;
} 
.fade-enter-done {
    opacity: 1;
}
//出场动画
.fade-exit{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0.5;
    transition: opacity 1s ease-in;
}
.fade-exit-done {
    opacity: 0;
}

CSSTransition中的一些钩子函数
onEnter：入场动画第一帧的时候触发
onEntering ： 入场动画第二帧的时候触发
onEntered ：入场动画结束的时候触发
onExit ： 出场动画结束第一帧的时候触发
onExiting : 出场动画结束第二帧的时候触发
onExited :  出场动画结束的时候触发

多个dom元素动画的实现

//用法
<TransitionGroup>
      {
      this.state.list.map((item,index) => {
          return (
            <CSSTransition
            timeout ={2000}
            classNames = 'fade'
            unmountOnExit
            apper={true}
             >
              <div>{item}</div>
           </CSSTransition>
              )
      })
      }
</TransitionGroup>