随着前端技术的不断发展，大量的高质量开源工具被创建。其中，npm 包 velocity-react 是一个非常优秀的 React 动画库。它通过使用 JavaScript 和 CSS3 进行动画实现，并提供了丰富的 API 以及易于使用的渐进式 API。本文将教你如何使用 velocity-react，以及如何运用这个库来构建动画效果。
安装和使用
velocity-react 可以通过 npm 进行安装：
npm install velocity-react --save
velocity-react 包括三个主要部分：VelocityComponent、VelocityTransitionGroup 和 VelocityTransitionGroupChild。
VelocityComponent
VelocityComponent 是 velocity-react 最基本的元素。它包装了一个完整的组件，可以轻松地将任何 React 组件与 Velocity.js 的动画结合起来。在使用 VelocityComponent 时，我们需要注意以下几点：
- 需要使用 Refs 来获取真正需要动画的子元素；
- 组件动画可以由 JavaScript 和 CSS3 动画来完成。
让我们看一下用 JavaScript 动画实现使用一个按钮打开和关闭一个列表的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ----------------- - ---- ----------------
------ ------- ----- ---- ------- --------- -
------------------ -
------------
---------- - -
------- -----
-
-
------------ - -- -- -
--------------- ------- ------------------ --
-
-------- -
----- - ------ - - ----------
------ -
-----
------- ---------------------------------- -------------
------------------ ------------
------- ------ - ------ - -------
-------- ------ - --- - ---
---
--- ------ -- ---------- - ----
--------------
--------------
--------------
--------------
-----
--------------------
------
-
-
-VelocityTransitionGroup
与 VelocityComponent 不同的是，VelocityTransitionGroup 通常用于对涉及多个元素的组件执行动画效果，比如列表的过度。使用 VelocityTransitionGroup 时，我们需要注意以下几点：
- children 属性必须是由 VelocityTransitionGroupChild 组件组成的数组；
- appear 和 enter 动画不应该重叠。
让我们看一下在列表中添加和删除项目时使用 VelocityTransitionGroup 的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ----------------------- - ---- ----------------
------ ------- ----- ---- ------- --------- -
------------------ -
------------
---------- - -
------ --------- -------- -------- ---------
-
-
--------- - -- -- -
----- - ----- - - ----------
--------------- ------ ---------- ------------------- - ------
-
------------ - -- -- -
----- - ----- - - ----------
--------------- ------ -------------- --- --
-
-------- -
----- - ----- - - ----------
------ -
-----
------- ---------------------------- -------------
------- ---------------------------------- -------------
------------------------
-------- ---------- ------------ -------- ------- --
-------- ---------- ---------- -------- ------- --
-----------------
-
----------------- -- -- -
-----------------------------
----------
----------------
-
-----------------
-------------------------------
---
--------------------------
------
-
-
-VelocityTransitionGroupChild
VelocityTransitionGroupChild 组件作为 VelocityTransitionGroup 的子元素，可以帮助我们更轻松地实现一个组件中的子元素的动画效果。使用 VelocityTransitionGroupChild 时，我们需要注意以下几点：
- 可以在 VelocityTransitionGroup 的 props 中设置 enter 和 leave 动画；
- 可以在俄 VelocityTransitionGroupChild 中使用的 Velocity 的 standard 和 UI pack。
让我们看一下在列表中添加和删除项目时使用 VelocityTransitionGroupChild 的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------------------------ ---------------------------- - ---- ----------------
------ ------- ----- ---- ------- --------- -
------------------ -
------------
---------- - -
------ --------- -------- -------- ---------
-
-
--------- - -- -- -
----- - ----- - - ----------
--------------- ------ ---------- ------------------- - ------
-
------------ - -- -- -
----- - ----- - - ----------
--------------- ------ -------------- --- --
-
-------- -
----- - ----- - - ----------
------ -
-----
------- ---------------------------- -------------
------- ---------------------------------- -------------
------------------------
-------- ---------- ------------ -------- ------- --
-------- ---------- ---------- -------- ------- --
-----------------
-
----------------- -- -- -
-----------------------------
----------
----------------
--------
---------- ----------------------------
-------- ----
-------- --------
--
--------
---------- ---------------------------
-------- ----
-------- --------
--
-
-----------------
-------------------------------
---
--------------------------
------
-
-
-深入 API
velocity-react 的 API 是非常丰富的，下面让我们来深入了解一下这些 API 的详细使用。
<velocitycomponent> API
animation 动画属性，可以使用 Velocity 和 Velocity React UI pack。详细的属性请参考 Velocity 文档。
children 渲染的子元素。
runOnMount 指示是否在组件挂载时运行动画，默认为 true。
targetQuerySelector 执行动画的子元素选择器。如果未指定，则 VelocityComponent 的第一个子元素将被选中。
visibility 在执行进入动画之前是否应该显示子元素，默认为 true。
delay 动画开始之前的延迟时间。
duration 动画总时间。
easing 动画缓和函数。
complete 动画完成时的回调函数。
<velocitytransitiongroup> API
enter 必需的属性，指定添加元素的动画。
leave 必需的属性，指定删除元素的动画。
appear 指定初次加载元素时的动画。通常用于虚拟滚动列表等优化场景。
leaveHideStyle 指定元素从 DOM 中删除时的状态。默认情况下，会自动隐藏它，但可以通过这个属性来指定真正的状态。
enterHideStyle 指定元素是否在添加时隐藏。
enterShowStyle 指定元素插入视图之匿名的样式。
leaveHideClassName 删除元素时需要添加的类名。
leaveHideTag 指示删除元素时用作包装元素的标签。
leaveShowClassName 添加元素时需要添加的类名。
leaveShowTag 指示添加元素时用作包装元素的标签。
runOnMount 在组件挂载时是否运行动画。
<velocitytransitiongroupchild> API
enter 指定添加元素的动画。这是一个对象，包含的属性有：
animation
style
options
stagger 指定元素添加后的延迟时间。
leave 指定元素删除时的动画效果。这是一个对象，包含的属性有：
animation
style
options
targetQuerySelector 指定执行动画的子元素选择器。
delay 指定动画开始之前的延迟时间。
duration 指定动画总时间。
easing 指定动画缓和函数。
complete 指定动画完成后的回调函数。
总结
velocity-react 是一个非常优秀的动画库，利用它可以轻松地实现许多令人印象深刻的动画效果。它提供了丰富的 API 和易于使用的渐进式 API，可以帮助你快速构建动画效果，从而提升您的应用程序的视觉质量和用户体验。希望本文能够帮助您更好地使用 velocity-react，并从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/velocity-react