react 路由动画的学习 --笔记记录

路由切换动画

路由切换过程中为了增强切换效果，需要为对应的路由页面添加对应的过渡效果，此时需要使用路由动画。react中路由动画的实现需要借助于react匹配的插件react-transition-group。

react-transition-group 基本知识：

在 react 项目中可使用官网提供的动画过渡库 react-transition-group 来实现切换页面（路由切 换）时的过渡效果。
路由切换动画

   npm i  react-transition-group

react-transition-group模块提供了四个组件：

1、Transition
2、CssTransition
3、TransitionGroup
4、SwitchTransition 以上组件2和3我们会经常用到。TransitionGroup不提供动画效果，只是动画的容器（动画列表）

CssTransition组件有很多重要的API：

in 为控制动画开启关闭的“开关”，true为开启，false为关闭
classNames 为对应的样式类名，和下面的css内的名字对应
timeout 为动画执行时间 ,延迟，涉及到动画状态的持续时间。也可传入一个对象
unmountOnExit 当动画效果为隐藏时， true 该标签会从dom树上移除 ,false ，类似js操作
appear 是否第一次加载该组件时启用相应的动画渲染，css文件中有含有appear的均和此标签相关
onEntered 入场动画结束时触发的钩子
onEnter 入场动画第一帧时执行
onEntering 当入场动画执行到第二帧时执行
onExit 出场动画第一帧时执行
onExiting 出场动画第二帧时执行
onExited 整个动画出场结束时执行
key: string ，这个属性配合TransitionGroup很重要，可以通过key来判断是否需要触发动画。这个属性十分重要。

4、页面转场动画

基于以上对react-router和react-transition-group的介绍，我们已经掌握了基础，接下来就可以将两者结合起来做页面切换的转场动画了。在上一案例的末尾有提到，用了TransitionGroup之后我们的问题变成如何选择合适的key值。那么在路由系统中，什么作为key值比较合适呢？
既然我们是在页面切换的时候触发转场动画，自然是跟路由相关的值作为key值合适了。而react-router中的location对象就有一个key属性，它会随着浏览器中的地址发生变化而变化。然而，在实际场景中似乎并不适合，因为query参数或者hash变化也会导致location.key发生变化，但往往这些场景下并不需要触发转场动画。

注意 Switch 有一个很重要的属性：

location。一般我们不会给该组件设置 location 属性。 有无该属性的区别： 不设置location属性： Switch
组件的子组件（一般是 Route 或 Redirect）会根据当前浏览器的 location 作为匹配依据來进行路由匹配。
设置location属性： Switch 组件的子组件会根据定义的 location 作为匹配依据。

注意：Switch需要添加location。

如果不添加，那么在转场动画中会发生很奇怪的现象，就是同时有两个相同的节点在移动。这是因为TransitionGroup组件虽然会保留即将被remove的Switch节点，但是当location变化时，旧的Switch节点会用变化后的location去匹配其children中的路由。由于location都是最新的，所以两个Switch匹配出来的页面是相同的。好在我们可以改变Switch的location属性，如上述代码所示，这样它就不会总是用当前的location匹配了。