Vue.js路由器转换幻灯片

Question

我有一些问题

我希望看起来像网络上的应用程序。

但我使用vue.js过渡看起来像这样

自动缩小尺寸，增加尺寸并重复。

这是代码

<transition name="slide">
    <router-view class="main" v-cloak/>
</transition>


.slide-enter, {
  opacity: 0;

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

如何解决这个问题？新年快乐！！！ （__）

Answer 1

我发现了这个问题

这是订单的问题。

修复了传入元素的Z-index值

.slide-fade-enter, .slide-fade-enter-to, .slide-fade-enter-active{
  position: absolute;
  transform: translateX(100%);
  z-index: -100;

}