因为项目的需求,需要在路由切换的时候,加入一些比较 zb 的视觉效果,所以研究了一下。把这些学习的过程记录下来,以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟,让他们少走些坑。可能我对代码的表述不是很到位,希望大家不要介意。机智的你们一定可以看明白。使用的插件是这个组件有一个很重要的属性:先确定需求:当切换路由的时候,旧的路由内容在一定时间内过渡消失,新的路由内容过渡显示。刚刚提到的而关于 history 对象,可以理解为一个数组,当页面的 location 发生变化时,或者刷新页面,history 就会push一个新的历史信息。在这个历史信息里面,有一个当路由切换的时候,location对象就会改变,新的key会使得页面重新渲染时出现两个CSSTransition。

react-router 路由切换动画的实现示例

react-router 路由切换动画的实现示例