单页应用（SPA）拥有良好的用户体验，但在页面切换时，缺乏过渡效果会使用户感到突兀。因此，在 SPA 中添加路由转场动画是非常重要的。
本文介绍如何使用 React 的路由库 react-router-dom 和动画库 react-transition-group 实现 SPA 的路由转场动画。
安装 react-router-dom 和 react-transition-group
在开始之前，我们需要先安装 react-router-dom 和 react-transition-group 两个库。
npm install react-router-dom react-transition-group
安装完成后，我们就可以开始编写代码了。
创建路由
首先，我们需要在 App 组件中定义路由。
-- -------------------- ---- -------
------ - ------------- -- ------- ------- ----- - ---- -------------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
---------
--
-在上面的代码中，我们使用 BrowserRouter 作为路由容器，Switch 组件用于路由选择，Route 组件定义不同的路由规则。此外，我们还定义了三个组件 Home、About 和 Contact，它们分别对应不同的路由。
添加转场动画
现在，我们可以为路由添加转场动画了。
我们可以使用 react-transition-group 库中的 CSSTransition 组件定义动画。CSSTransition 组件内部会根据路由进入和离开的状态渲染不同的 CSS 类名，从而实现动画。
下面是一个示例代码，它为每个路由定义了不同的转场动画：
-- -------------------- ---- -------
------ - -------------- --------------- - ---- -------------------------
-------- ----- -
------ -
--------
------
---------- -------- -- -- -
-----------------
--------------
------------------
-----------------
-------------
-
------- --------------------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
----------------
------------------
--
--
---------
--
-在上面的代码中，我们使用了一个 render 属性，它接收一个回调函数，用于渲染路由组件。
在回调函数中，我们使用 TransitionGroup 组件包裹路由组件，并在其中使用 CSSTransition 组件来定义转场动画。CSSTransition 组件接收三个重要的参数：
- key：需要为每个动画指定一个 key，通常使用 location.key，用于区分不同的路由。
- classNames：动画的 CSS 类名。在本例中，我们使用 .fade 来定义淡入淡出的动画效果，需要预先在 CSS 中定义该类名的过渡状态。
- timeout：动画持续的时间，单位为毫秒。
我们在 CSS 文件中为 .fade 类名定义了淡入淡出的过渡效果：
-- -------------------- ---- ------- ----------- - -------- -- - ------------------ - -------- -- ----------- ------- ----- -------- - ---------- - -------- -- - ----------------- - -------- -- ----------- ------- ----- -------- -
在上面的代码中，我们为 .fade-enter 和 .fade-exit 定义了起始状态，然后为 .fade-enter-active 和 .fade-exit-active 定义了过渡状态。
总结
这篇文章介绍了如何在 React 的 SPA 中添加路由转场动画。我们使用了 react-router-dom 和 react-transition-group 两个库，分别用于路由控制和动画实现。最终代码实现了不同的路由转场动画，提升了用户体验。
希望这篇文章能够帮助初学 React 的开发者掌握 SPA 中添加转场动画的方法，并实现自己的动画效果。完整的示例代码可以在 GitHub 上找到。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455c63a968c7c53b09292a4