react——react-transition-group的基本使用（三）TransitionGroup组件

实现的效果如上所示：点击按钮，列表下方添加字符串，添加的过程带着动画，并且添加后字体变成红色。代码如下：

首先是，App.js文件中注册<TransitionGroupDemo>组件

TransitionGroupDemo.js文件代码：

import React, { PureComponent } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './TransitionGrup.css'

export default class TransitionGroupDemo extends PureComponent {
    constructor(props){
        super(props);
        this.state={
            names:["coderwhy","koba","cysia","mike"]
        }
    }
    render() {
        const {names}=this.state;
        return (
            <TransitionGroup>
                {
                    names.map((item,index)=>{
                        return(
                            <CSSTransition  key={index}
                                            timeout={1000}
                                            classNames="item">
                                <div>{item}</div>
                            </CSSTransition>
                            ) 
                    })
                }
                <button onClick={e=>{this.addNames()}}>添加</button>
            </TransitionGroup>
        )
    }
    addNames(){
        const newnames=[...this.state.names,"connie"]
        this.setState({
            names:newnames
        })
    }
}

TransitionGroupDemo.css文件代码：

.item-enter{
    opacity: 0;
}
.item-enter-active{
    opacity: 1;
    transition:opacity 1000ms;
}
.item-enter-done{
    opacity: 1;
    color:red; 
}