1.下载

yarn add react-transition-group

2.使用

import React, { PureComponent } from 'react'
import { CSSTransition,TransitionGroup } from 'react-transition-group'
import './index.css'
export default class index extends PureComponent {
    state={
        names:['codewhy','code','lilei']
    }
    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.addName()}> +name</button>
            </TransitionGroup>
        )
    }
    addName(){
       this.setState((state,props)=>{
           return{
             names:[...state.names,'wansgu']
           }
       }) 
    }
}

//index.css
.item-enter{
    opacity: 0;
    transform: scale(.6);
  }
  .item-enter-active{
    opacity: 1;
    transform: scale(1);
    transition: all 500ms;
  }
  .item-enter-done{
      color:red;
  }
  .item-exit {
    opacity: 1;
    transform: scale(1);
  }
  .item-exit-active  {
    opacity: 0;
    transform: scale(.6);
    transition: all 500ms;
  }
  .item-exit-done {
    opacity: 0;
  }