npm 包 react-router-transition-group 使用教程
1. 概述
react-router-transition-group 是一个 react-router 的插件，它可以帮助我们实现页面转场时的动画效果。使用 react-router-transition-group，我们可以在页面路由转场的过程中添加过渡效果，使得页面跳转更加平滑，提升用户体验。
2. 安装和配置
2.1 安装
使用 npm 安装 react-router-transition-group：
npm install react-router-transition-group --save
2.2 使用
在你的 React 组件中，可以如下引入 react-router-transition-group：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------------------
------ ----- ---- --------
------ - ----- - ---- -------------------
----- ------------- - -- -- -------- ---------------
----- ---------------- - -- -- ----------- ---------------
----- ------- - -- ----- -- -- -
------ -
-----
----------------
---------------------
---------- -------- - --
---------- -------- - --
----------- -------- - --
------------------- -- --
---------- ---------------------------------
-------- ---------------
---
-
------
---------------------------
-------------------------
--------------------------
--
------
------------------------------
----------------------------
-----------------------------
--
------------------
------
--
--以上代码演示了一个简单的例子，其中 SomeComponent 和 AnotherComponent 分别对应了路由 /some 和 /another，在这两个路由之间转场时，会有一个淡入淡出的过渡动画。
在上面的代码中我们使用了 RouteTransition 组件。RouteTransition 组件可以通过设置一些属性来控制页面转场时的动画效果。下面我们会介绍这些属性的用法。
3. 动画效果控制属性
3.1 pathname
pathname 属性用来指定当前的路由路径，它通常是由 match 对象中的 path 属性计算得到的，如下所示：
<RouteTransition pathname={match.path} />3.2 atEnter、atLeave、atActive
atEnter、atLeave 和 atActive 三个属性用来控制页面转场时的 CSS 样式，它们分别对应了页面转场的三个不同阶段：
- atEnter：页面进入时的样式，通常是透明度为 0，位移到画面的外面等；
- atLeave：页面离开时的样式，通常是透明度为 0，位移到画面的外面等；
- atActive：页面转场过程中的样式，通常是透明度为 1，位移到画面的中央等。
这三个属性都是一个对象，用来指定对应的 CSS 样式。
举个例子，我们可以如下设置 atEnter、atLeave 和 atActive：
<RouteTransition
pathname={match.path}
atEnter={{ opacity: 0, translateY: 100 }}
atLeave={{ opacity: 0, translateY: -100 }}
atActive={{ opacity: 1, translateY: 0 }}
/>上面代码让组件从下面移动到中央，离开时从中央移动到上面，且透明度渐变至 0。
3.3 mapStyles
mapStyles 属性可以用来自定义样式的映射。它有两个参数：
- styles：样式集合，包含了当前页面的 atEnter、atLeave、atActive 的全部样式。
- matches：匹配的路由对象数组。
我们可以根据 styles 的转场信息，手动计算出更复杂的过渡效果。如下示例代码，实现了一个根据路由方向（前进或者后退）改变 page 组件宽度的效果：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ - --------------- - ---- --------------------------------
----- ---- - -- ----- -- -- -
----
--------
--------- -----------
------ -------
---- --
----- --
--
-
----------------
---------------------
---------- -------- -- ------ -- ----- ------------- - ----- - ---------------- - ------------------------ - ------ - -------- --
---------- -------- -- ------ -- ----- ------------- - ----- - ---------------- - ------------------------ - ------- - ------- --
----------- -------- -- ------ ------- ----- ---- --
------------------- -- --
------ -------------
----- ------------
-------- ---------------
---
-
------ -------------------------- ---------------- --------------------- --
------ ----- ----------------- ---------- -- ---------- ------ - ------------ --
------------------
------
--
------ -------- -------- ----- -- -
------ -
-----
---------------
----
----
----- --------------------------------------- ---- ------------
-----
----
----- ------------------------------------------------
-----
----
----- --------------------------------------- -- ------------
-----
-----
------ -------------------------- ---------------- --
------ ----- ----------------- ---------- -- ---------- ------ - ------------ --
------
--
-3.4 className
实现过程中还可以用到 className，给过渡元素添加 class 名称，以便为其内部元素添加 transition 属性或自定义样式等。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ - --------------- - ---- --------------------------------
----- ---- - -- ----- -- -- -
---- ----------------------
----------------
---------------------
---------- -------- -- ------ ------- ---------- ------------------ --
---------- -------- -- ------ ------- ---------- ------------------- --
----------- -------- -- ------ ------- ---------- --------------- --
------------------- -- --
------ -------------
---------- -----------------
-------- ---------------
---
-----------------------------
-
------ -------------------------- ---------------- --
------ ----- ----------------- ---------- -- ---------- ------ - ------------ --
------------------
------
--
------ -------- -------- ----- -- -
------ -
-----
--------- ---------
----
----
----- --------------------------------- --------
-----
----
----- --------------------------------- --------
-----
----
----- --------------------------------- --------
-----
-----
------ -------------------------- ---------------- --
------ ----- ----------------- ---------- -- ---------- ------ - ------------ --
------
--
-.example-classname .innerPage {
transition: all ease-in-out 300ms;
}4. 总结
本文我们介绍了 react-router-transition-group 包的基本使用方法，并详细介绍了其中的属性和相关实现。通过使用 react-router-transition-group，我们可以实现网页的平滑跳转，使得用户体验更为舒适。同时这个包也可以给我们提供多种选择，通过不同的配置可以实现各种不同的效果。希望可以帮助到大家。
5. 相关引用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d092702382271d