关于vue路由组件出入动画的笔记

vue路由组件出入动画的笔记、

• 在实际项目中路由的跳转，如果不配有动画的话，那么就显得太过突兀。因此我想做一个vue路由组件跳转的不同动画，分为是前进跳转还是后退跳转。
• 前进跳转的话，是从右边进入，后退的话是从左右进入。
• 这样实现的基本步骤是：

1. 在vue的原型上首先设置初始的路由动画，然后设置不同的跳转方法，并且在不同的跳转方法中，在vue的原型上给定不同的动画名

	Vue.prototype.transitionName = "slide-fade-in"; //初始化路由跳转动画，如果不设置的时候，会在首次加载的时候报错，说是transitionName 未定义
	Vue.prototype.$push = (url) => {
	   Vue.prototype.transitionName = "slide-fade-in";
	  router.push(url)
	};
	Vue.prototype.$pop = (n = -1) => {
	  Vue.prototype.transitionName = "slide-fade-out";
	  let path = router.currentRoute.path;
	  if (path == "/") {
	      return;
	  }
	  router.go(n);
	};

• 然后我们在路由跳转的时候，就不要用router上的push和window.history.go(-1)了。
• 我们在路由跳转的时候就需要用到我们在vue原型上设置的跳转方法了，我们可以直接通过this.$pop() 和this.$push()就可以进行路由跳转了
• 然后我们设置不同的动画（slide-fade-out 从左进入这个动画名）（slide-fade-in 从右进入这个动画名）

//组件进入 退出时的动画
.slide-fade-out-enter-active,
.slide-fade-out-leave-active,
.slide-fade-in-enter-active,
.slide-fade-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.slide-fade-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-fade-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-fade-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-fade-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

• 上面两步之后。我们可以在transtion这个标签上使用我们拿到的动画名

    <transition :name="this.transitionName"> //注意这里面的 this.transitionName 不是在data中定义的，而是我们定义在原型上的
           <router-view v-if="isRouterAlive" />
       </transition>