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

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

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

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 (
            
                {
                    names.map((item,index)=>{
                        return(
                            
                                
{item}
                            
                            ) 
                    })
                }
                {this.addNames()}}>添加
            
        )
    }
    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; 
}