VueRouterTransition（页面路由转场动画）

`.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active{position:absolute;//需要注意的地方width:100%;//注意事项否则页面渲染会卡顿。will-change：变换；过渡：所有0.3秒缓出；}.slide-right-enter{不透明度：0；transform:translate(-100%,0);}.slide-right-leave-active{opacity:0;transform:translate(0%,0);}.slide-left-enter{不透明度:0;transform:translate(100%,0);}.slide-left-leave-active{opacity:0;转换：翻译（0%，0）；最近在测试导航组件的时候，遇到了市面上一些vue-router组件的转场效果不理想的问题，于是自己写了一个例子，使用slideeffect，以供参考。vue代码App.vuejs代码由于main.jshistory效果确实不理想，所以用meta自定义depth和backurl属性来控制页面间的跳转关系。使用特效进入场景时左右滑动，离开场景时向右滑动。data(){return{transitionName:'slide-left'};},watch:{$route(to,from){consttoDepth=to.meta.depth;constfromDepth=from.meta.depth;this.transitionName=toDepth{if(to.name!=='login'){consttoken=checkUserToken();//检查是否有权限登录if(!token){next({//权限无效则跳转到登录页面path:'/login'});}else{next();}}else{next();}});导出默认路由器；CSS代码``.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active{position:absolute;//需要注意的地方width:100%;//注意事项否则页面渲染会卡顿。will-change：变换；过渡：所有0.3秒缓出；}.slide-right-enter{不透明度：0；transform:translate(-100%,0);}.slide-right-leave-active{opacity:0;transform:translate(0%,0);}.slide-left-enter{不透明度:0;transform:translate(100%,0);}.slide-left-leave-active{opacity:0;转换：翻译（0%，0）；