vue页面跳转过渡动画与防止抖动方式

整页跳转动画

总是看到别人的页面有个淡入淡出效果，但是自己一直不知道怎么实现，感觉不能是每个组件都加一个动画，于是我去看了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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。