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://jkwzsj.com/article/dedgoh.html