【九月打卡】第19天 2022升级 React18+TS高仿AntD从零到一打造组件库@慕课网原创_慕课网

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

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

主讲老师：张轩

课程内容：

今天学习的内容包括：

7-5 React Transition Group 简介
7-6 React Transition Group 实践 - 动画效果第二种实现方式

课程收获：

React Transition Group是用于帮助React实现动画效果

npm install react-transition-group --save

CSSTransition

CSSTransition官方使用教程
CSSTransition可以实现单个标签的动画效果
使用流程

导入CSSTrasition

用标签包裹需要设置动画的标签
in : 绑定控制动画效果切换的属性 this.state.show的值在true和false之间切换来控制动画效果
timeout: 动画持续的时间
classNames : 动画的class名与.css中样式类名一致
unmountOnExit : 动画出场即fade-exit-done样式效果结束后直接将标签移除掉（若没有该属性只是不显示标签标签的位置任然占有）
onEntered : 钩子函数还有很多不同时刻的钩子函数具体查看官网文档
appear ：值为true时第一次显示标签是也有动画效果需要在.css文件中设置相关样式

<CSSTransition
    in = {this.state.show}
    timeout  = {1000}
    classNames = 'fade'
    unmountOnExit
    onEntered = {(el) => {el.style.color = 'blue'}}
    appear = {true}
    >
    <h1>hello world</h1>
</CSSTransition>

设置样式

fade : 对应属性classNames = 'fade’
appear的三个样式类：对应属性appear = {true}
enter的三个样式类：入场样式动画
exit的三个样式类：出场样式动画

.fade-appear, .fade-enter{
  opacity: 0 ;
}

.fade-appear-active, .fade-enter-active{
  opacity: 1;
  transition: opacity 1s ease-in;
} 

.fade-appear-done , .fade-enter-done{
  opacity: 1 ;
}

.fade-exit{
  opacity: 1 ;
}

.fade-exit-active{
  opacity: 0;
  transition: opacity 1s ease-in;
}

.fade-exit-done{
  opacity: 0;
}