整页跳转动画
总是看到别人的页面有个淡入淡出效果，但是自己一直不知道怎么实现，感觉不能是每个组件都加一个动画，于是我去看了vue的官方文档。
官方给了这两个东西：
<transition> 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 ，可以通过 tag attribute 配置哪个元素应该被渲染。（详细内容见官方文档）
经过我一番查找研究，弄明白了应该怎么使用：
采用<transition> 包裹住路由，这样就可以实现路由页面跳转整个页面元素的动态：
<transition>
<router-view></router-view>
</transition>
上面的内容自己根据官方文档给transition写个动画就也可以实现。
页面抖动
但是实现了之后发现，点击页面跳转时页面有个细微的往上跑一下就停住，像是抖动一样。
我查的资料有的说是页面高度不对需要调整overflow-x和overflow-y，也有的说是路由跳转的时候上一个路由还占着位置因此用.fade-leave-to属性，我试了好像也没什么反应。
后来我发现了一个很简单的解决方法，就是给<transition>加一个 mode="out-in":
<transition mode="out-in">
<router-view></router-view>
</transition>
这样就完美解决抖动了！
我的代码
我用的是ElementUI组件库，因此代码是
<transition name="el-fade-in-linear" mode="out-in">
<router-view></router-view>
</transition>
