vue实现页面跳转过渡效果 transition

当我们做移动端页面的页面跳转时，不想让页面跳转的那么生硬，所以需要添加过渡效果

html部分（name=“fade” 这是关键一步，fade 是自定义class名的一个标识）

<transition name="fade">
	<keep-alive>
		  <router-view></router-view>
	</keep-alive>
</transition>

css部分（fade-enter-active 中的 fade 就是上面的name定义的，在这里编辑过渡效果）

.fade-enter-active,
.fade-leave-active {
  transition: all .2s linear;
}
.fade-enter {
  transform: translateX(100%);
  /* opacity: 0; */
}
.fade-leave-to {
  transform: translateX(-100%);
}

加入keep-alive是需要设置页面缓存，
为了返回的时候记录上一页状态，
进出页面的时候还会触发activated和deactivated两个钩子函数，
真正实现过渡样式的是transition标签