试了很多中方法，最终找到了一个可用的方法

废话不多讲，实现一般的过渡动画实现以下代码就可以了。

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.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);
}

但是我在做项目过程中发现页面高度不一致的时候，页面会先抖动一下，在浏览器中这个问题是不存在的，只有在手机中才存在这个问题。然后经过一番百度我加入了下面代码就解决了。

.router-view {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

但是我经过测试，只需要加入overflow-x: hidden;这一行代码就可以，我感觉是页面高度不一致导致的问题，至于为什么加入这个代码生效至今没有弄懂。先记录一下。

原博：https://blog.csdn.net/qq_25610161/article/details/81940863