1.下载react-transition-group

yarn add react-transition-group

2.使用

import React, { PureComponent } from 'react'
import {SwitchTransition,CSSTransition}from 'react-transition-group'
import "./index.css"
export default class index extends PureComponent {
    state={
        isOn:true
    }
    render() {
        const {isOn}=this.state
        return (
            <div style={{padding:'20px'}}>
           <SwitchTransition>
               <CSSTransition key={isOn?'on':'off'} classNames='btn' timeout={1000}>
                   <button onClick={e=>this.setState({isOn:!isOn})}>{isOn?'on':'off'}</button>
               </CSSTransition>
           </SwitchTransition>     
            </div>
        )
    }
}

//index.css
.btn-enterr{
    opacity: 0;
    transform: translateX(100%);
  }
  .btn-enter-active{
    opacity: 1;
    transform: translateX(0);
    transition: all 1000ms;
  }
  .btn-enter-done{
  }
  .btn-exit {
    opacity: 1;
  }
  .btn-exit-active  {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1000ms;
  }
  .btn-exit-done {
    opacity: 0;
  }