路由过渡动画

1. App.vue

   <template>
   	<div>
   		<transition :name="transitionName">
   			<keep-alive>
   				<router-view></router-view>
   			</keep-alive>
   		</transition>
   	</div>
   </template>
   
   <script>
   	export default {
   		name: 'App',
   		data() {
   			return {
   				transitionName: ''
   			};
   		},
   		watch: {
   			$route(to, from) {
   				let tog = to.meta.grade;
   				let frg = from.meta.grade;
   				if (tog != frg) {
   					this.transitionName = tog < frg ? 'slide-right' : 'slide-left';
   				} else {
   					this.transitionName = '';
   				}
   			}
   		}
   	};
   </script>
   
   <style scope>
   	.slide-right-enter-active,
   	.slide-right-leave-active,
   	.slide-left-enter-active,
   	.slide-left-leave-active {
   		height: 100%;
   		will-change: transform;
   		transition: all 300ms;
   		position: absolute;
   		backface-visibility: hidden;
   		perspective: 100;
   	}
   	.slide-right-enter {
   		opacity: 0;
   		transform: translate3d(-100%, 0, 0);
   	}
   	.slide-right-leave-active {
   		opacity: 0;
   		transform: translate3d(100%, 0, 0);
   	}
   	.slide-left-enter {
   		opacity: 0;
   		transform: translate3d(100%, 0, 0);
   	}
   	.slide-left-leave-active {
   		opacity: 0;
   		transform: translate3d(-100%, 0, 0);
   	}
   </style>

2. router/index.js

   // 在路由中加入 meta: { grade: 0 }，用 grade 标注页面层级
   {
       path: '/login',
       name: 'Login',
       component: Login,
       meta: { grade: 0 }
   },{
       path: '/register',
       name: 'Register',
       component: Register,
       meta: { grade: 1 },
       props({ params: {type} }){
           return {type}
       }
   }

过渡障碍

1. 有的时候页面过渡的动画会有瑕疵，页面会被向左或向右压扁。
2. 遇到这种情况只需保证页面上的元素铺满全屏即可，可以用空盒子占位。