React Router 是一个流行的 React 应用程序路由库，它可以让您轻松地在应用程序中实现导航和页面跳转的功能。但是，默认情况下，它不会提供任何页面跳转动画的效果，这就需要我们手动添加一些过渡效果或动画效果，从而让应用程序更具吸引力和流畅性。
在这篇文章中，我们将介绍如何使用 React Router 实现页面跳转动画，并提供具体的代码实现。我们将使用 React Transition Group 库中的 CSSTransition 组件，这是一个功能强大的 React 动画组件库。我们还将演示如何自定义样式和动画。
实现过程
首先，我们需要安装 React Router 和 React Transition Group 依赖：
npm install react-router-dom react-transition-group
然后，我们可以按照以下步骤在 React 应用程序中实现页面跳转动画：
1. 创建路由
我们需要在应用程序中创建路由，以便管理页面之间的跳转。这里我们将创建一个简单的路由：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
---------
--
-2. 创建动画组件
为了在页面之间切换时添加动画效果，我们需要创建一个动画组件（例如 FadeTransition），并将其添加到路由上。在组件中，我们将使用 CSSTransition 组件添加 CSS 过渡效果：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ -----------------------
-------- ---------------- --------- -------- -- -
------ -
--------------
----------
--------------
-----------------
-------------
-
----------
----------------
--
-在上面的代码中，我们使用了 CSSTransition 组件来添加过渡效果。我们还指定了超时 时间（timeout）、CSS 类名称（classNames）和 unmountOnExit 属性，以控制该过渡动画的行为。请注意，我们还可以在文件夹中创建一个类似的 CSS 文件，并定义相应的 CSS 样式。
3. 将动画组件添加到路由中
最后，我们需要将 FadeTransition 组件添加到路由中。这里我们使用 React 的 renderProps 方式，可以向组件传递路由属性。具体来说，我们将使用 render 属性而不是 component，这样我们就可以将 FadeTransition 组件作为属性传递给 Route 组件：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
-------- ----- -
------ -
--------
--------
------
-----
--------
--------------- -- -
----------------
----- ---------- --
-----------------
--
--
------
-------------
--------------- -- -
----------------
------ ---------- --
-----------------
--
--
------
---------------
--------------- -- -
----------------
-------- ---------- --
-----------------
--
--
---------
---------
--
-现在，我们已经成功地将动画组件添加到路由中，并完成了 React Router 页面跳转动画的实现。
自定义样式和动画
我们也可以轻松地自定义 FadeTransition 组件的样式和动画效果。以下是对 FadeTransition.css 文件的内容进行更改的示例：
-- -------------------- ---- ------- -- ---------- -- ----------- - -------- -- - ------------------ - -------- -- ----------- ------- ------ -------- - ---------- - -------- -- - ----------------- - -------- -- ----------- ------- ------ --------- -
在上面的示例中，我们更改了 CSS 样式，以使它执行不同的过渡效果。您可以根据需要更改 CSS，从而创建自定义样式和动画。
结论
React Router 是一款功能强大的路由库，可以帮助您轻松管理应用程序中的页面跳转。通过使用 React Transition Group 库的 CSSTransition 组件，我们可以为应用程序添加动画效果，从而使其更加吸引人，并且实现起来非常简单。此外，您还可以使用自定义样式和动画，以满足您的特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6724716f2e7021665e137ba8