动画切换过程中出现 scroll 滚动条

在 Vue 路由切换动画 中，提到利用 Vue 路由的 meta.transition 属性实现页面左右滑动的切换效果。实际实现中，还是踩了许多坑。

切换过程中出现 scroll 滚动条

这是因为切换动画时，两个页面同时出现在视口，老页面还没有消失，新的页面只能被挤下去，导致页面超过视口大小，出现了滚动条。
解决办法有两个：
一是修改transition的模式，默认是页面进入和页面离开动画同时开始，才导致上述现象的。可以设置 mode="out-in", 让老页面先离开，然后新页面再进入。这个解决办法的好处就是直接的回避了问题，不会有什么副作用。缺点就是，滑动动画不连续，一个页面已经滑出去了，另一个页面才开始滑动。

另一个方法是将页面设定为绝对定位，这样脱离文档流，页面就不会被挤出去。优点是动画连续，缺点是改变了页面定位方式，有可能会产生副作用。