1.安装

yarn add react-transition-group

2.使用

这里我使用了unt-design的库，需要安装一下unt-design yarn add antd yarn add @ant-design/icons\

   {/* 1.把需要使用动画的组件用csstransition包裹 */}
   {/* 2.设置属性 in，这里的in后面对应的是一个布尔值*/}
   {/* 3.设置classnames，默认在前面加上前缀 */}
   {/* 4.动画退出卸载，卸载dom，不在文档流中占用空间*/}
   {/* 5.appear第一次加载有动画,第一步给标签添加appear属性*/}

import React, { PureComponent } from 'react'
import {CSSTransition}from 'react-transition-group'
import { Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import './index.css'
const { Meta } = Card;
export default class index extends PureComponent {
    state={
        isShow:true
    }
    render() {
        const {isShow}=this.state
        return (
            <div >
        <button style={{margin:'10px'}} onClick={e=>{this.setState({isShow:!isShow})}}>显示/隐藏</button>
            {/* 1.把需要使用动画的组件用csstransition包裹 */}
            {/* 2.设置属性 in，这里的in后面对应的是一个布尔值*/}
            {/* 3.设置classnames，默认在前面加上前缀 */}
            {/* 4.动画退出卸载，卸载dom，不在文档流中占用空间*/}
            {/* 5.appear第一次加载有动画,第一步给标签添加appear属性*/}
          <CSSTransition in={isShow} classNames='card' timeout={300} unmountOnExit={true} appear 
          onEnter={el=>console.log('开始进入')}
          onEntering={el=>console.log('正在进入')}
          onEntered={el=>console.log('进入完成')}
          onExit={el=>console.log('开始退出')}
          onExiting={el=>console.log('退出状态')}
          onExited={el=>console.log('退出完成')}>
          <Card
    style={{ width: 300 }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <SettingOutlined key="setting" />,
      <EditOutlined key="edit" />,
      <EllipsisOutlined key="ellipsis" />,
    ]}
  >
    <Meta
      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
      title="Card title"
      description="This is the description"
    />
  </Card>
          </CSSTransition>
            </div>
        )
    }
}

//index.css
.card-enter,.card-appear{
  opacity: 0;
  transform: scale(.6);
}
.card-enter-active,.card-appear-active{
  opacity: 1;
  transform: scale(1);
  transition: all 300ms;
}
.card-enter-done,.card-appear-done{
}
.card-exit {
  opacity: 1;
  transform: scale(1);
}
.card-exit-active  {
  opacity: 0;
  transform: scale(.6);
  transition: all 300ms;
}
.card-exit-done {
  opacity: 0;
}