一个丝滑的路由切换效果vue.transition

<transition name="fade-transform" mode="out-in">
      <router-view />
 </transition>

<!--

mode:out-in(先出后进) | in-out（先进后出）| 默认：同时进行

mode="out-in"的效果更舒服流畅

--> 　

//样式： 
/* fade-transform */ 
.fade-transform-leave-active, 
.fade-transform-enter-active { 
　　transition: all .5s; 
} 
.fade-transform-enter { 
　　opacity: 0; 
　　transform: translateX(-30px); 
} 
.fade-transform-leave-to {
 　 opacity: 0; 
　　transform: translateX(30px); 
}