使用react-transition-group实现动画

react中使用css动画方式，但是在实际中使用这些开发的方式很少，主要是涉及到js动画，便没法处理了。这时，可以使用react-transition-group这个第三方模块来实现更加复杂的动画。
首先打开github，搜索react-transition-group，或者直接网址进入https://github.com/reactjs/react-transition-group，之后进入主文档https://reactcommunity.org/react-transition-group/，显示我们要先安装。可以采用以下两种安装

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

主要使用这里的css transition，但是当css transition解决不了问题的时候，我们就可以通过transition来解决问题

首先我们先去引用import { CSSTransition } from 'react-transition-group';
App.js

import React, { Component, Fragment } from 'react';
import { CSSTransition } from 'react-transition-group';
import './style.css'
class App extends Component{

    constructor(props){
        super(props);
        this.state={
            show:true
        }
        this.handleToggle=this.handleToggle.bind(this);
    }
    render() {
        return (
            <Fragment>
                <CSSTransition
                    in={this.state.show}
                    timeout={1000}
                    classNames='fade'
                    unmountOnExit
                    onEnter={(el)=>{el.style.color='blue'}}
                    appear={true}
                >
                    <div>hello</div>
                </CSSTransition>
                <button onClick={this.handleToggle}>toggle</button>
               
            </Fragment>
        )
    }
    handleToggle(){
        this.setState({
            show:this.state.show ? false : true
        })
    }
}

export default App;

style.css

/* 当动画执行入场动画的时候，也就是show的值从false变为true的时候，
这时入场动画将会执行。
在入场动画执行的第一个时刻，CSSTransition这个组件会往div标签上挂载一个样式，
就是fade-enter */
/* 入场动画刚要执行的第一个瞬间，但还没有入场的时候 */
.fade-enter,.fade-appear{
    opacity: 0;
}
/* 入场动画执行的第二个时刻，到入场动画执行完成之前的一个时刻 */
.fade-enter-active,.fade-appear-active{
    opacity: 1;
    transition: opacity 1s ease-in;
}
/* 当整个入场动画执行完成之后 */
.fade-enter-done{
    opacity: 1;
    /* color: red; */
}

/* 出场动画执行的第一时刻 */
.fade-exit{
    opacity: 1;
}

.fade-exit-active{
    opacity: 0;
    transition: opacity 1s ease-in;
}
.fade-exit-done{
    opacity: 0;
}

仔细看，这个实现过程比之之前复杂了，但是却带给了我们很多新的特性。看我们这个官方文档的网址https://codesandbox.io/s/m77l2vp00x?from-embed。接收一个unmountOnExit这样一个属性，可以当点击按钮时，隐藏的时候将整个dom都给移除了，这个功能之前是没法做到的，用这个库就显得非常简单。

比如，hello显示出来之后，希望他的颜色变成红色，使用css

.fade-enter-done{
　　opacity: 1;
　　color: red;
}

这个第三方库提供了很多的钩子函数，所谓钩子函数就是例如生命周期函数，在某一时刻可以自动执行的函数。这就可以通过js额外的干一点事情，用 js实现这个动画
onEntered={(el)=>{
　　el.style.color=‘blue’
}}
这种语法在之前做动画的时候也是没法实现的

多个动画的js实现
外边总和用TransitionGroup ，里边单个动画用CSSTransition包裹

import React, { Component, Fragment } from 'react';
import { CSSTransition,TransitionGroup } from 'react-transition-group';
import './style.css'
class App extends Component{

    constructor(props){
        super(props);
        this.state={
            list:[]
        }
        this.handleAddItem=this.handleAddItem.bind(this);
    }
    render() {
        return (
            <Fragment>
                <TransitionGroup>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <CSSTransition
                                timeout={1000}
                                classNames='fade'
                                unmountOnExit
                                onEnter={(el)=>{el.style.color='blue'}}
                                appear={true}
                                key={index}
                            >
                                <div key={index}>{item}</div>
                            </CSSTransition>
                        )
                    })
                }
                </TransitionGroup>
                <button onClick={this.handleAddItem}>toggle</button>
            </Fragment>
        )
    }
    handleAddItem(){
        this.setState((prevState)=>{
            return {
                list : [...prevState.list,'item']
            }
        })
    }
}

export default App;