import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './AppStyle.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
        return (
            <Fragment>
                <button onClick={this.handleClick}>
                    切换
                </button>
                <TransitionGroup>
                    {
                        this.state.list.map((item, index) => {
                            return <CSSTransition
                                timeout={1000}
                                classNames='fade'
                                unmountOnExit
                                onEntered={(el) => { el.style.color = 'blue' }}
                                appear={true}
                                key={index}
                            >
                                <div onClick={this.handleDelete.bind(this, index)}>{item}</div>
                            </CSSTransition>
                        })
                    }
                </TransitionGroup>
            </Fragment>
        )
    }
    handleClick() {
        let length=this.state.list.length;
        let list = [...this.state.list, `hello--${length}`]
        this.setState(() => {
            return {
                list
            }
        })
    }
    handleDelete(index) {
        this.setState((prevState) => {
            let list = [...prevState.list];
            list.splice(index, 1)
            return {
                list
            }
        })
    }
}

export default App

.fade-enter,.fade-appear {
    opacity:0;
}
.fade-enter-active,.fade-appear-active {
    opacity:1;
    transition:all 2s ease 0s;
}
.fade-enter-done {
    opacity:1;
}
.fade-exit {
    opacity:1;
}
.fade-exit-active {
    opacity:0;
    transition:all 4s ease 0s;
}
.fade-exit-done {
    opacity:0;
}