import React, { useState } from "react"

import "./index.css"

function App() {

  const [show, setShow] = useState(true)

  const toogle = () => {

    setShow(!show)

  }

  return (

    <div>

      <div className={show ? "show" : "hide"}>hello,world</div>

      <button className="btn" onClick={toogle}>

        toogle

      </button>

    </div>

  )

}

export default App

.show {

  opacity:;

  transition: all 1s;

}

.hide {

  opacity:;

  transition: all 1s;

}

.show {

  animation: show-item 1s ease-in forwards;     // forwards 表示保存动画最后一帧的状态

}

.hide {

  animation: hide-item 1s ease-in forwards;

}

@keyframes show-item {

  0% {

    opacity:;

  }

  50% {

    opacity: 0.5;

    color: pink;

  }

  100% {

    opacity:;

    color: green;

  }

}

@keyframes hide-item {

  0% {

    opacity:;

  }

  50% {

    opacity: 0.5;

  }

  100% {

    opacity:;

  }

}

.fade-enter {

  opacity:;

}

.fade-enter-active {    // 在最后一帧时会被清除

  opacity:;

  transition: all 1s ease-in;

}

.fade-enter-done {  // 这是必须的 保证最后一帧动画的状态

  opacity:;

}

.fade-exit {

  opacity:;

}

.fade-exit-active {

  opacity:;

  transition: all 1s ease-in;

}

.fade-exit-done {

  opacity:;

}

<CSSTransition in={show} classNames="fade" timeout={10000} unmountOnExit>  unmountOnExit 表示隐藏的时候卸载该组件

   <div>hello,world</div>

</CSSTransition>

<TransitionGroup>

          {

             this.state.list.map((item,index)=>{

                return (<CSSTransition key={index}

                    appear = {true}

                    timeout = {1000}

                    unmountOnExit

                    classNames='fade'

                    onEntered={(el)=>{el.style.color='blue'}}>

                      <div>{item}</div>

              </CSSTransition>);

          })

     }

 </TransitionGroup>
<button onClick={ this.handlerClick }>toogle</button>