在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