老师，我按照您教的一步一步写的，实际unmountOnExit的隐藏效果实现了，js控制蓝色字体也实现了，就是渐变的动画没有实现，我觉得是样式文件的连接出了问题。老师和同学们帮我看看到底哪错了…
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}  //动画执行时间
                    classname='fade'
                    unmountOnExit
                    onEntered={(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部分：

.fade-enter, .fade-active {        /*入场动画第一个时刻*/
    opacity: 0;
}

.fade-enter-active, .fade-appear-active { /*入场动画第二个时刻的状态*/
    opacity: 1;
    transition: opacity 1s ease-in;
}

.fade-enter-done {  /*入场动画执行完成之后*/
    opacity: 1;
}

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

.fade-exit-active { /*出场动画第二个时刻的状态*/
    opacity: 0;
    transition: opacity 1s ease-in;
}

. fade-exit-done { /*出场动画执行完成之后*/
    opacity: 0;
}