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对象了。
import { router } from 'react-router-dom';
import { createbrowserhistory } from 'history';
const history = createbrowserhistory()
....
这样替换就完成了。注册listener的方法也很简单：history.listen(你的函数)即可。
这时我们能控制的地方有两个：跳转发生时react-transition-group提供的延时和enter、exit类名，和之前注册的listen函数。
本文提供的左右滑动思路为：判断跳转action，如果是push，则一律为当前页面左滑离开屏幕，新页面从右到左进入屏幕，如果是replace则一律为当前页面右滑，新页面自左向右进入。如果是pop则要判断是用户点击浏览器前进按钮还是返回按钮，还是调用了history.pop。
由于无论用户点击浏览器的前进按钮或是后退按钮，在history.listen中获得的action都将为pop，而react router也没有提供相应的api，所以只能由开发者借助location的key自行判断。如果用户先点击浏览器返回按钮，再点击前进按钮，我们就会获得一个和之前相同的key。
知道了这些后，我们就可以开始编写代码了。首先我们先按照react router官方提供的路由动画案例，将react transition group添加进路由组件：
{
const { location } = params
return (
)
}}/>
transitiongroup组件会产生一个div，所以我们将这个div的id设为'routewrap'以便后续操作。提供给csstransition的key的改变将直接决定是否产生路由动画，所以这里就用了location中的key。
为了实现路由左右滑动动画和位置记忆，本文的思路为：利用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函数了。由于篇幅有限，这里就直接贴代码，不逐行解释了。
先从动画基础样式开始：
.router-enter{
position: fixed;
opacity: 0;
transition : left 1s;
}
.router-enter-active{
position: relative;
opacity: 0; /*js执行到到timeout函数后再出现，防止页面闪烁*/
}
.router-exit-active{
position: relative;
z-index: 1000;
}这里有个问题：为什么enter的时候新页面position要设成fixed呢？是因为qq浏览器下如果执行history.pop会导致新页面先撑开文档再执行listen函数从而导致获取不到旧页面的滚动位置。为了在transition group提供的钩子函数onenter中获得旧页面的滚动位置只能先将enter设为fixed。
然后是最主要的listen函数：
const config = {
routeanimationduration: 350,
};
let historykeys: string[] = json.parse(sessionstorage.getitem('historykeys')); // 记录history.location.key的列表。存储进sessionstorage以防刷新丢失
if (!historykeys) {
historykeys = history.location.key ? [history.location.key] : [''];
}
let lastpathname = history.location.pathname;
const positionrecord = {};
let isanimating = false;
let bodyoverflowx = '';
let currenthistoryposition = historykeys.indexof(history.location.key); // 记录当前页面的location.key在historykeys中的位置
currenthistoryposition = currenthistoryposition === -1 ? 0 : currenthistoryposition;
history.listen((() => {
if (lastpathname === history.location.pathname) { return; }
if (!history.location.key) { // 目标页为初始页
historykeys[0] = '';
}
const delay = 50; // 适当的延时以保证动画生效
if (!isanimating) { // 如果正在进行路由动画则不改变之前记录的bodyoverflowx
bodyoverflowx = document.body.style.overflowx;
}
const routerwrap = document.getelementbyid(wrapid);
const originpage = routerwrap.children[routerwrap.children.length - 1] as htmlelement;
const oposition = originpage.style.position;
settimeout(() => { // 动画结束后还原相关属性
document.body.style.overflowx = bodyoverflowx;
originpage.style.position = oposition;
isanimating = false;
}, routeanimationduration delay 50); // 多50毫秒确保动画执行完毕
document.body.style.overflowx = 'hidden'; // 防止动画导致横向滚动条出现
if (history.location.state && history.location.state.noanimate) { // 如果指定不要发生路由动画则让新页面直接出现
settimeout(() => {
const wrap = document.getelementbyid(wrapid);
const newpage = wrap.children[0] as htmlelement;
const oldpage = wrap.children[1] as htmlelement;
newpage.style.opacity = '1';
oldpage.style.display = 'none';
});
return;
}
const { action } = history;
const currentrouterkey = history.location.key ? history.location.key : '';
const oldscrolltop = window.scrolly;
originpage.style.top = -oldscrolltop 'px'; // 防止页面滚回顶部
originpage.style.position = 'fixed';
settimeout(() => { // 新页面已插入到旧页面之前
isanimating = true;
const wrap = document.getelementbyid(wrapid);
const newpage = wrap.children[0] as htmlelement;
const oldpage = wrap.children[1] as htmlelement;
if (!newpage || !oldpage) {
return;
}
const currentpath = history.location.pathname;
const isforward = historykeys[currenthistoryposition 1] === currentrouterkey; // 判断是否是用户点击前进按钮
if (action === 'push' || isforward) {
positionrecord[lastpathname] = oldscrolltop; // 根据之前记录的pathname来记录旧页面滚动位置
window.scrollto(0, 0); // 如果是点击前进按钮或者是history.push则滚动位置归零
if (action === 'push') {
historykeys = historykeys.slice(0, currenthistoryposition 1);
historykeys.push(currentrouterkey); // 如果是history.push则清除无用的key
}
} else {
if (isrememberposition) {
settimeout(() => {
window.scrollto(0, positionrecord[currentpath]); // 滚动到之前记录的位置
console.log('scrollto' positionrecord[currentpath]);
}, 50);
}
// 删除滚动记录列表中所有子路由滚动记录
for (const key in positionrecord) {
if (key === currentpath) {
continue;
}
if (key.startswith(currentpath)) {
delete positionrecord[key];
}
}
}
if (action === 'replace') { // 如果为replace则替换当前路由key为新路由key
historykeys[currenthistoryposition] = currentrouterkey;
}
window.sessionstorage.setitem('historykeys', json.stringify(historykeys)); // 对路径key列表historykeys的修改完毕，存储到sessionstorage中以防刷新导致丢失。
// 开始进行滑动动画
newpage.style.width = '100%';
oldpage.style.width = '100%';
newpage.style.top = '0px';
if (action === 'push' || isforward) {
newpage.style.left = '100%';
oldpage.style.left = '0';
newpage.style.transition = `left ${(routeanimationduration - delay) / 1000}s`;
newpage.style.webkittransition = `left ${(routeanimationduration - delay) / 1000}s`;
oldpage.style.transition = `left ${(routeanimationduration - delay) / 1000}s`;
oldpage.style.webkittransition = `left ${(routeanimationduration - delay) / 1000}s`;
settimeout(() => {
newpage.style.opacity = '1'; // 防止页面闪烁
newpage.style.left = '0';
oldpage.style.left = '-100%';
}, delay);
} else {
newpage.style.left = '-100%';
oldpage.style.left = '0';
settimeout(() => {
oldpage.style.transition = `left ${(routeanimationduration - delay) / 1000}s`;
oldpage.style.webkittransition = `left ${(routeanimationduration - delay) / 1000}s`;
newpage.style.transition = `left ${(routeanimationduration - delay) / 1000}s`;
newpage.style.webkittransition = `left ${(routeanimationduration - delay) / 1000}s`;
newpage.style.left = '0';
oldpage.style.left = '100%';
newpage.style.opacity = '1';
}, delay);
}
currenthistoryposition = historykeys.indexof(currentrouterkey); // 记录当前history.location.key在historykeys中的位置
lastpathname = history.location.pathname;// 记录当前pathname作为滚动位置的键
}, 50);
dpage.style.transition = `left ${(routeanimationduration - delay) / 1000}s`;
oldpage.style.webkittransition = `left ${(routeanimationduration - delay) / 1000}s`;
settimeout(() => {
newpage.style.opacity = '1'; // 防止页面闪烁
newpage.style.left = '0';
oldpage.style.left = '-100%';
console.log(newpage.style.left);
console.log(oldpage.style.left);
}, delay);
} else {
newpage.style.left = '-100%';
oldpage.style.left = '0';
settimeout(() => {
oldpage.style.transition = `left ${(routeanimationduration - delay) / 1000}s`;
oldpage.style.webkittransition = `left ${(routeanimationduration - delay) / 1000}s`;
newpage.style.transition = `left ${(routeanimationduration - delay) / 1000}s`;
newpage.style.webkittransition = `left ${(routeanimationduration - delay) / 1000}s`;
newpage.style.left = '0';
oldpage.style.left = '100%';
newpage.style.opacity = '1';
}, delay);
}
currenthistoryposition = historykeys.indexof(currentrouterkey); // 记录当前history.location.key在historykeys中的位置
lastpathname = history.location.pathname;// 记录当前pathname作为滚动位置的键
});
}));
完成后我们再将路由中的延时配置为当前定义的config.routeanimationduration ：
let currentscrollposition = 0
const syncscrollposition = () => { // 由于x5内核会先撑开文档再执行listen函数，所以要在onenter的时候就去获得滚动条位置。
currentscrollposition = window.scrolly
} export const routes = () => {
return (
{
const { location } = params;
return (
onenter={syncscrollposition}>
);
}}/>
);
};
这样路由动画就大功告成了。整体没有特别难的地方，只是对history和css相关的知识要求稍微严格了些。
附上本文的完整案例：https://github.com/axel10/react-router-slide-animation-demo
