在前端开发中，使用npm包能够提高工作效率，减少代码冗余，使代码更加清晰易懂。React是一个十分流行的前端框架，针对React开发了许多npm包。今天我们来学习一个React的npm包——react-end。
什么是react-end？
react-end是一个为React组件提供进退场效果的npm包。它可以让我们使用自定义的CSS动画，让React组件在进入和离开页面时能够产生炫酷的效果。
如何安装react-end？
首先，打开终端，进入项目文件夹，在命令行中输入以下命令进行安装：
npm install react-end --save
这一步执行成功后，你的项目中就已经成功安装了react-end。
如何使用react-end？
在引入react-end的过程中，我们需要用到两个组件——Transition和CSSTransition。其中，Transition是CSSTransition的基础组件。
1. 使用Transition组件
Transition只包含了两个属性：in和timeout。
in：当它的值为true时，表示组件需要在页面中呈现。当值为false时，则表示组件从页面中移除。timeout：表示组件的过渡动画时间。
下面是一个简单的使用Transition的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- ------------
-------- --------- -
----- ------ -------- - ----------------
------ -
-----
------- ----------- -- ----------------------------------
----------- --------- --------------
-------- -- -
----
--------
----------- -------- ---- -------------
-------- ----- --- --------- - - - -
--
-
------
------
--
-------------
------
--
-
------ ------- --------在这个例子中，我们创建了一个Example组件。当点击按钮时，show的值会取反，从而改变Transition组件的in属性的值，使得它的子组件能够在页面中呈现或消失。同时，当组件进入或离开页面时，会改变子组件的透明度，从而产生一种淡入淡出的效果。
2. 使用CSSTransition组件
CSSTransition是Transition的扩展组件。它可以让我们使用自定义的CSS动画，来实现进退场的效果。它包含了以下三个属性：
in：跟Transition一样，表示组件在页面中是否显示。timeout：跟Transition一样，表示过渡动画的时间。classNames：表示动画样式的类名。
下面是一个使用CSSTransition的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------- - ---- ------------
------ ---------------
-------- --------- -
----- ------ -------- - ----------------
------ -
-----
------- ----------- -- ----------------------------------
--------------
---------
-------------
-----------------
-------------
-
-----------------
----------------
------
--
-
------ ------- --------在这个例子中，我们通过传递classNames属性，指定了动画样式的类名。我们还在styles.css文件中编写了这个类名对应的CSS样式，用来实现组件的淡入淡出效果。
总结
本文对React动画的库react-end进行了详细介绍，并提供了两个示例。希望这篇文章能够让你更好地了解react-end，并在你的React项目中实现优雅的过渡动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005754981e8991b448ea4f5