前言
当有一组过渡动效时，可以使用react-transition-group这个库。
注意的点
1、timeout必须设置为动效持续时长，否则会导致没有效果。
2、CSSTransition包裹的组件会延迟卸载。
理论基础
1. CSSTransition 组件中重要的 API 解析
-
in：Boolean，控制组件显示与隐藏。true显示，false隐藏； -
timeout：Number，延迟，涉及到动画状态的持续时间。可传入一个对象，如{exit: 300, enter: 500}来分别设置“进入”和“离开”的延时； -
classNames：String，动画进行时给元素添加的类名。一般利用这个属性来设计动画！（❗️特别注意：是classNames而不是className！） -
unmountOnExit：Boolean，这是一个很实用的 API，它为我们节省了很多精力。为true时——组件为隐藏状态时移除组件；为false时——组件保持动画结束时的状态而不移除元素（一般要设成true)。
2. 类名的添加
动画进行时，以 classNames="fade" 为例，CSSTransition 将自动依次为要执行动画的元素添加以下类名：
-
fade-enter -
fade-enter-active -
fade-enter-done -
fade-exit -
fade-exit-active -
fade-exit-done
我们也可以单独指定每一个类名：
classNames={{
enter: "my-enter",
enterActive: "my-active-enter",
enterDone: "my-done-enter",
exit: "my-exit",
exitActive: "my-active-exit",
exitDone: "my-done-exit"
}}
3. 每个类名的添加时机
-
enter：当元素进入时添加； -
enter-active：当元素进入到页面后添加。它与enter的主要差别是——enter-active是在元素已经添加到页面后才会添加enter-active，而enter在元素添加到页面时已经携带； -
enter-done：动画执行完毕后添加。动画时长取决于timeout； -
exit：元素离开时添加。离开动画时长取决于timeout； -
exit-active：同exit； -
exit-done：离开动画完成后添加（仅在unmountOnExit为false时有效）。
参考：
（32）React 拓展——② 使用 react-transition-group 实现动画 | React 基础理论实操
