[ 问题 ] 请问 vue 的页面 切换动画问题

Question

在页面切换的时候其他页面正常，但浏览历史返回个人页面时

会出现页面切换动画 橙色部分在 底部 卡住 0.2s左右后 再
弹到顶部，而不是像其他页面正常左右滑动切换

以下是切换动画CSS代码

.Router {

transition: all 0.4s ease;
-webkit-overflow-scrolling: touch;

}

.slide-left-enter,
.slide-right-leave-active {

opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);

}

.slide-right-enter,
.slide-left-leave-active {

opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);

}

Answer 1

解决问题了

好像是滑动原本页面也是display:block(独占占一行)，所以新进来的页面会被顶下

大家在写切换的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: 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);
}

Answer 2

橙色部分 是图片? 把图片改为div+css ;