网站建设资讯

NEWS

网站建设资讯

Vue解决路由过渡动画抖动问题(实例详解)-创新互联

前言

创新互联建站专业为企业提供孝感网站建设、孝感做网站、孝感网站设计、孝感网站制作等企业网站建设、网页设计与制作、孝感企业网站模板建站服务,十载孝感做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置、路由参数等功能,让单页面应用变得更易于管理。良好的路由管理尤为重要,比如路由拦截、路由懒加载、路由权限等都在开发中起着至关重要的作用。同时路由还支持视图过渡效果,没有添加过渡动画的路由切换会感觉很生硬,为了提高用户体验,路由过渡还是很有必要的。毕竟做出来,自己看着也舒服。


过渡动效文档:https://cn.vuejs.org/v2/guide/transitions.html

过渡动画抖动

代码片段

这里为路由添加一个淡入淡出的过渡效果

.fade-enter, .fade-leave-to{ visibility: hidden; opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity .2s ease; } .fade-enter-to, .fade-leave{ visibility: visible; opacity: 1; }

文章题目:Vue解决路由过渡动画抖动问题(实例详解)-创新互联
网页地址:http://njwzjz.com/article/dedgoh.html