山东省 安全双体系建设网站,专门做美食的视频网站有哪些,如何选择镇江网站优化,南京市建设工程造价管理处网站目录 整页跳转动画页面抖动我的代码 整页跳转动画
总是看到别人的页面有个淡入淡出效果#xff0c;但是自己一直不知道怎么实现#xff0c;感觉不能是每个组件都加一个动画#xff0c;于是我去看了vue的官方文档。
官方给了这两个东西#xff1a;
transition 元… 目录 整页跳转动画页面抖动我的代码 整页跳转动画
总是看到别人的页面有个淡入淡出效果但是自己一直不知道怎么实现感觉不能是每个组件都加一个动画于是我去看了vue的官方文档。
官方给了这两个东西
transition 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上而不会额外渲染 DOM 元素也不会出现在可被检查的组件层级中。 元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 可以通过 tag attribute 配置哪个元素应该被渲染。详细内容见官方文档
经过我一番查找研究弄明白了应该怎么使用 采用transition 包裹住路由这样就可以实现路由页面跳转整个页面元素的动态
transitionrouter-view/router-view
/transition上面的内容自己根据官方文档给transition写个动画就也可以实现。
页面抖动
但是实现了之后发现点击页面跳转时页面有个细微的往上跑一下就停住像是抖动一样。 我查的资料有的说是页面高度不对需要调整overflow-x和overflow-y也有的说是路由跳转的时候上一个路由还占着位置因此用.fade-leave-to属性我试了好像也没什么反应。 后来我发现了一个很简单的解决方法就是给transition加一个 modeout-in:
transition modeout-inrouter-view/router-view
/transition这样就完美解决抖动了
我的代码
我用的是ElementUI组件库因此代码是
transition nameel-fade-in-linear modeout-inrouter-view/router-view
/transition
