react-transition-group动画组件详解

1.react-transition-group的优势

React有非常好的开发环境，任何开发需要的基本需求都可以找到官方或大神造的轮子，动画也不例外。

react-transition-group动画组件表现很好，可以满足日常动画开发需求，而且是React官方提供的动画过渡库，有完整的API文档。

注：

react-transition-group官方文档

https://reactcommunity.org/react-transition-group/

react-transition-group主要有四个核心库：

---

2.安装react-transition-group

切换终端为cmd后输入以下代码进行安装（注：）：

npm install react-transition-group --save

一开始安装是报错的，然后关闭vscode，之后以管理员身份运行vscode后，安装包成功：

---

3.使用CSSTransition

引入CSSTransition：

import {CSSTransition} from 'react-transition-group'

使用的方法就和使用自定义组件一样,直接写<CSSTransition>，而且className属性在CSSTransition相对应的是classNames（记得加s）属性。修改上节写的Boss.js文件里的render区域：

render() { 
    return ( 
        <div>
            {/*this.state.toshow值为true时&#