react中使用动画 react-transition-group

在React中通过react-transition-group使用过渡、动画，首先要有CSS3中的过渡和动画的相关知识储备，可以参考过渡和2D变换、动画和3d变换。

我们自己通过css设置过渡、动画，需要给不同的class添加变化属性，比如位移、缩放大小或者旋转角度，再通过切换类名来达到动画的效果，那么在react-transition-group当中，仍然需要在不同的class上定义不同的css样式，简化的是，不需要我们再来进行判断切换类名，它规定了进入动画、退出动画分别的class后缀，我们只需要按照一定的规范去定义这些class即可。

可以看到class是有一个变化的过程的，当传入属性的值由true变成false时，即显示到隐藏，class的变化过程为 enter enter-active 及enter-done，传入属性的值由false变成true时，及隐藏到显示，class的变化过程为 exit exit-active和exit-done，知道react-transition-group的应用规律之后，再来看看它提供的主要API。

这样第三方的库，首先要做的事情就是安装 npm i react-transition-group --save

最常用的是CSSTransition，它提供了与css相关的变化，它提供了一些属性供我们使用

(1) in 传入boolean值，传入的是true代表开启 enter enter-active和enter-done的这一变化过程，传入false代码开启 exit exit-active exit-done这一过程 (必传)
(2) timeout 表示执行时间，enter-active到enter-done 或者 exit-active到exit-done的执行时间 (必传)
(3) classNames 定义添加的类名，这里定义的类名会被添加到 enter-xxx 及 exit-xxx 的之前
(4) ummountOnExit 默认为false，表示当传入in的值为false值，CSSTransition中的元素不从dom中移除，传true时则会被移除

可以看到class在 enter / exit之前都增加了一个自定义的class属性box，以及当方块消失的时候，方块的dom元素被移除了，实现代码如下

// jsx代码
import React, { Component } from "react";
import { CSSTransition } from 'react-transition-group'
import './style.css';

export default class CSSTransitionDemo extends Component {
  constructor(props){
    super(props);
    this.state = {
      isShow: true
    }
  }

  render(){
    const { isShow } = this.state;
    return(
      <div className="simpleTransition">
         <button onClick={()=>this.setState({isShow:!isShow})}>
              当前状态：{isShow ? '显示' : '隐藏'}</button>
         <CSSTransition in={isShow}
            classNames="box"
            timeout={1000}
            unmountOnExit={true}>
         <div className="helloBox">
            hello
         </div>
       </CSSTransition>
    </div>)
  }
}

// css代码
.box-enter {
  opacity: 0;
  transform: scale(0.6)
}

.box-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}

.box-exit {
  opacity: 1;
  transform: scale(1);
}

.box-exit-active {
  opacity: 0;
  transform: scale(.6);
  transition: all 1000ms
}

在上面我特地点击了刷新按钮，可以看到第一次展示的时候是没有加载动画的，如果需要得自行定义，还可以增加动画操作阶段的回调方法

(5) appear 定义首次加载的动画, 同时需要在css中添加对应的类名和样式, 可以与enter一致
(6) 动画执行还有一些回调方法，需传入函数，函数有一个入参，参数为CSSTransition所包裹的元素
onEnter、onEntering、onEntered、onExit、onExiting、onExited

实现代码如下

// jsx
<CSSTransition in={isShow}
               classNames="box"
               timeout={1000}
               unmountOnExit={true}
               appear
               onEnter={ el=>console.log('开始进入',el)}
               onEntering={ el => console.log('正在进入')}
               onEntered={ el => console.log('进入完成')}
               onExit={ el => console.log('开始退出')}
               onExiting={ el => console.log('正在退出')}
               onExited={ el => console.log('退出完成')}>
    // ...
</CSSTransition>

// css
.box-enter, .box-appear {
  opacity: 0;
  transform: scale(0.6)
}

.box-enter-active, .box-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}

这是最常用的CSSTransition，再来说说 SwitchTransition，SwitchTransition的作用就是切换展示的内容，有两种模式，分别是先隐藏旧内容再展示新的内容（out-in），先展示新内容再展示旧内容（in-out）

实现代码如下，需要CSSTransition配合使用，此时CSSTransition不需要定义in属性，因为in属性为false时就直接不展示整个元素了，此时需要定义不同的key来进行区分

// jsx
<SwitchTransition mode="out-in">
  <CSSTransition key={isShow ? 'on' : 'off'}
                 classNames="btn"
                 timeout={1000}>
    <button onClick={e=>this.setState({ isShow: !isShow })}>
         {isShow ? 'on' : 'off'}
    </button>
  </CSSTransition>
</SwitchTransition>

// css
.btn-enter {
  opacity: 0;
  transform: translateX(100%)
}

.btn-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s, transform 1s
}

.btn-exit {
  opacity: 1;
  transform: translateX(0)
}

.btn-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s, transform 1s;
}

还有一个是GroupTransition，用来给CSSTransition分组，当通过遍历来给元素添加 CSSTransition的动画时，需要再最外层增加 GroupTransition 才能添加上动画

实现代码如下

<TransitionGroup>
   {this.state.movies.map((item, index)=>(
      <CSSTransition key={item.id}
                     classNames="movie"
                     timeout={1000}>
          <div>{item}</div>
       </CSSTransition>
    ))}
    <button onClick={e=>this.addMovies()}>添加电影</button>
</TransitionGroup>

对于遍历还要注意一点，本身react遍历数据时是希望我们加上唯一的key值，一方面是因为dom的diff算法进行比较时能够提高性能，另一方面，有时候没有key值会出现一些错误，比如像以下情况，逆序删除元素的时候，删除的是第一个元素，但是却给最后一个元素添加了动画

以上就是react-transition-group当中常用的三个组件，CSSTransition、SwitchTransition与TransitionGroup

react中使用动画 react-transition-group

推荐阅读