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