vue页面跳转添加动画效果，实现页面跳转时左右平推的动画效果

---

多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)

---

   vue项目，为页面跳转添加动画效果

 

app.vue文件

<template>
	<div id="app">
		<transition :name="transitionName">
			<router-view></router-view>
		</transition>
	</div>
</template>

return {
	transitionName: ''
}


watch: {
	'$route' (to, from) {

      }
  }

wa监控路由，往前推：transitionName = slide-left

                      往后推：transitionName = slide-right

css:左右平推效果

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-enter {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translateX(-100%);
}

好了，就是这些，有问题再咨询柚子，希望能帮助到一些朋友！！！