由于网课所讲内容已经不再兼容当前的react19，所以这部分笔记中止

过渡动画的基本使用（react19不再兼容）

react-transition-group介绍

• 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的添加用户体验

• 虽然可以用原生css来实现，但是react社区为我们提供了react-transition-group来完成过渡动画

• 这个库可以帮助我们方便地实现组件的入场和离场动画，使用时需要进行额外的安装

npm install react-transition-group

yarn add react-transition-group

• react-transition-group本身非常小，不会为我们应用程序增加过多的负担

react-transition-group主要包含四个组件

• Transition

  • 该组件是一个和平台无关的组件（不一定要结合CSS）
  • 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition

• CSSTransition（目前react19不兼容）

  • 在前端开发中，通常使用CSSTransition来完成过渡动画

• SwitchTransition

  • 两个组件显示和隐藏切换时，使用该组件

• TransitionGroup

  • 将多个动画组件包裹在其中，一般用于列表中元素的动画

CSSTransition

CSSTransition是基于transition组件构建的

csstransition执行过程中，有三个状态：apper、enter、exit

他们有三种状态，需要定义对应的css样式：

• 第一类，开始状态：对应的类是-apper, -enter, exit
• 第二类，执行动画：对应的类是-apper-active, -enter-active, -exit-active
• 第三类，执行结束：对应的类是-apper-done, -enter-done, -exit-done

由于react-transition-group依赖的findDOMNode已经被废弃，react19不再兼容，我学到这里才发现，所以这个笔记到这里中止