在 React 应用中，有时候我们需要为组件添加动画效果，以提高用户体验。而 react-addons-css-transition-group 正是为此而生的一个 npm 包，它提供了一种简便的方式来为 React 组件添加 CSS 过渡动画效果。
安装与导入
使用 npm 可以很容易地安装 react-addons-css-transition-group：
npm install react-addons-css-transition-group --save
然后，在你的 React 组件中引入该包：
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
基本用法
ReactCSSTransitionGroup 是一个高阶组件，它接受以下属性：
transitionName：定义过渡动画的类名前缀，必须设置。transitionEnterTimeout：定义进入过渡动画的时间，以毫秒为单位，默认值为 500。transitionLeaveTimeout：定义离开过渡动画的时间，以毫秒为单位，默认值为 500。transitionAppear：是否在组件首次挂载时执行过渡动画，默认值为 false。transitionAppearTimeout：定义首次挂载时的过渡动画时间，以毫秒为单位，默认值为 500。
下面是一个例子，展示如何使用 ReactCSSTransitionGroup 添加淡入淡出动画效果：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------------- ---- ------------------------------------
------ --------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ ------ --- ----- --- ----- --- --
---------------- - ----------------------------
-
------------- -
----- ------- - ----- ------------------------- - ----
--------------- ------ --------------------- -------- ---
-
-------- -
------ -
-----
------- ------------------------------ -------------
------------------------
---------------------
-----------------------------
-----------------------------
-
-------------------------- -- -
---- -----------------------
---
--------------------------
------
--
-
-
------ ------- ----其中，style.css 文件中定义了 fade 类名相关的 CSS 样式：
-- -------------------- ---- ------- ----------- - -------- ----- - ------------------ - -------- -- ----------- ------- ------ -------- - ----------- - -------- -- - ------------------ - -------- ----- ----------- ------- ------ -------- -
在点击“Add Item”按钮时，新的元素会以淡入动画的方式出现；而当元素被删除时，它会以淡出动画的方式消失。
高级用法
除了基本用法之外，ReactCSSTransitionGroup 还有一些高级用法，例如：
动态添加/删除元素
ReactCSSTransitionGroup 可以很方便地处理动态添加和删除元素的动画效果。例如，当我们在上面的例子中点击“Add Item”按钮时，新的元素会以淡入动画的方式出现。而当我们从列表中删除一个元素时，它会以淡出动画的方式消失。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------------- ---- ------------------------------------
------ --------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ ------ --- ----- --- ----- --- --
---------------- - ----------------------------
----------------- - -----------------------------
-
------------- -
----- ------- - ----- ------------------------- - ----
--------------- ------ --------------------- -------- ---
-
------------------- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------