react.js使用TransitionGroup和CSSTransiton对多个div进行动画操作

Animation.js

import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
//TransitionGroup用于对多个div进行动画操作
import './Animation2.css'
class Animation extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
        this.divAdd = this.divAdd.bind(this)
    }
    divAdd = () => {
        this.setState((prevState) => {
            return { list: [...prevState.list, '123456'] }
        })
    }
    render() {
        return (
            <Fragment>
                <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>{item}</div>
                                </CSSTransition>
                            )
                        })
                    }
                </TransitionGroup>
                <button onClick={this.divAdd}>按钮</button>
            </Fragment>
        );
    }
}
export default Animation;

Animation.css

/* 入场动画执行的第一个时刻 */
.fade-enter, .fade-appear{
    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;
}