请选择 进入手机版 | 继续访问电脑版
React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆-1.jpg
2018年12月17日更新:
修复在qq浏览器下执行pop跳转时页面错位问题
本文的代码已封装为npm包发布:react-slide-animation-router

在React Router中,想要做基于路由的左右滑动,我们首先得搞清楚当发生路由跳转的时候到底发生了什么,和路由动画的原理。
首先我们要先了解一个概念:history。history原本是内置于浏览器内的一个对象,包含了一些关于历史记录的一些信息,但本文要说的history是React-Router中内置的history,每一个路由页面在props里都可以访问到这个对象,它包含了跳转的动作(action)、触发跳转的listen函数、监听每次跳转的方法、location对象等。其中的location对象描述了当前页面的pathname、querystring和表示当前跳转结果的key属性。其中key属性只有在发生跳转后才会有。
了解完history后,我们再来复习一下react router跳转的流程。
当没有使用路由动画的时候,页面跳转的流程是:
用户发出跳转指令 -> 浏览器历史接到指令,发生改变 -> 旧页面销毁,新页面应用到文档,跳转完成
当使用了基于React-Transition-Group的路由动画后,跳转流程将变为:
用户发出跳转指令 -> 浏览器历史接到指令,发生改变 -> 新页面插入到旧页面的同级位置之前 -> 等待时间达到在React-Transition-Group中设置的timeout后,旧页面销毁,跳转完成。
当触发跳转后,页面的url发生改变,如果之前有在history的listen方法上注册过自己的监听函数,那么这个函数也将被调用。但是hisory要在组件的props里才能获取到,为了能在组件外部也能获取到history对象,我们就要安装一个包:https://github.com/ReactTraining/history。用这个包为我们创建的history替换掉react router自带的history对象,我们就能够在任何地方访问到history对象了。
  1. [/code]这样替换就完成了。注册listener的方法也很简单:history.listen(你的函数)即可。
  2. 这时我们能控制的地方有两个:跳转发生时React-Transition-Group提供的延时和enter、exit类名,和之前注册的listen函数。
  3. 本文提供的左右滑动思路为:判断跳转action,如果是push,则一律为当前页面左滑离开屏幕,新页面从右到左进入屏幕,如果是replace则一律为当前页面右滑,新页面自左向右进入。如果是pop则要判断是用户点击浏览器前进按钮还是返回按钮,还是调用了history.pop。
  4. 由于无论用户点击浏览器的前进按钮或是后退按钮,在history.listen中获得的action都将为pop,而react router也没有提供相应的api,所以只能由开发者借助location的key自行判断。如果用户先点击浏览器返回按钮,再点击前进按钮,我们就会获得一个和之前相同的key。
  5. 知道了这些后,我们就可以开始编写代码了。首先我们先按照react router官方提供的路由动画案例,将react transition group添加进路由组件:
  6. [code]
复制代码
TransitionGroup组件会产生一个div,所以我们将这个div的id设为'routeWrap'以便后续操作。提供给CSSTransition的key的改变将直接决定是否产生路由动画,所以这里就用了location中的pathname。如果pathname发生变化则默认产生路由动画。(search/querystring不属于pathname,所以修改了也不会产生动画。)
为了实现路由左右滑动动画和滚动位置记忆,本文的思路为:利用history.listen,在发生动画时当前页面position设置为fixed,top设置为当前页面的滚动位置,通过transition、left进行左滑/右滑,新页面position设置为relative,也是通过transition和left进行滑动进入页面。所有动画均记录location.key到一个数组里,根据新的key和数组中的key并结合action判断是左滑还是右滑。并且根据location.pathname记录就页面的滚动位置,当返回到旧页面时滚动到原先的位置。
先对思路中一些不太好理解的地方先解释一下:
Q:为什么要为当前页面设置position:fixed和top?
A:是为了让当前页面立即脱离文档流,使其不影响滚动条,设置top是为了防止页面因position为fixed而滚回顶部。
Q:为什么新页面的position要设置为relative?
A:是为了撑开页面并出现滚动条。如果新页面的高度足以出现滚动条却将position设置为fixed或者absolute的话将导致滚动条不出现,即无法滚动。从而无法让页面滚动到之前记录的位置。
Q:为什么不用transform而要使用left来作为动画属性?
A:因为transform会导致页面内position为fixed的元素转变为absolute,从而导致排版混乱。
明白了这些之后,我们就可以开始动手写样式和listen函数了。由于篇幅有限,这里就直接贴代码,不逐行解释了。
先从动画基础样式开始:
  1. [/code]这里有个问题:为什么enter的时候新页面position要设成fixed呢?是因为qq浏览器下如果执行history.pop会导致新页面先撑开文档再执行listen函数从而导致获取不到旧页面的滚动位置。为了在transition group提供的钩子函数onEnter中获得旧页面的滚动位置只能先将enter设为fixed。
  2. 然后是最主要的listen函数:
  3. [code]
复制代码
完成后我们再将路由中的延时配置为当前定义的config.routeAnimationDuration :
[code][/code]这样路由动画就大功告成了。整体没有特别难的地方,只是对history和css相关的知识要求稍微严格了些。
附上本文的完整案例:axel10/react-router-slide-animation-demo
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 邀请

本版积分规则

Archiver|手机版|小黑屋|翁笔

Powered by Discuz! X3.3 © 2001-2018 Comsenz Inc.

返回顶部