【九月打卡】第20天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节：第7章 他山之石 - Icon 组件 和 Transition 组件

主讲老师：张轩

课程内容：

今天学习的内容包括：

7-7 尽善尽美 - React Transition Group 添加菜单消失的动画

课程收获：

TransitionGroup

TransitionGroup官方使用教程

CSSTransition只能实现单个标签的动画效果，如果要实现一组标签都有动画效果（遍历的标签）则要用标签将整个遍历的内容包裹

使用流程：

导入CSSTransition, TransitionGroup

import {CSSTransition, TransitionGroup} from 'react-transition-group'

对遍历的单个标签执行上面关于CSSTransition的属性设置和样式设置

用TransitionGroup包裹遍历的所有内容

<TransitionGroup>
  { 
      this.state.list.map((item, index) => {  
          return ( 
            <CSSTransition
                in = {this.state.show}
                timeout  = {1000}
                classNames = 'fade'
                unmountOnExit
                onEntered = {(el) => {el.style.color = 'blue'}}
                appear = {true}
              key = {index}
              >
                <TodoItem />    //遍历的单标签
              </CSSTransition>
          )
        }
  }
</TransitionGroup>

xxx-enter: 进入（入场）前的CSS样式；

xxx-enter-active:进入动画直到完成时之前的CSS样式;

xxx-enter-done:进入完成时保留的CSS样式;

xxx-exit:退出（出场）前的CSS样式;

xxx-exit-active:退出动画知道完成时之前的的CSS样式。

xxx-exit-done:退出完成时保留的CSS样式。