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;

}