Css 带有帕格部分的VueJS转换

在一个多步骤的过程中，我有多个“页面”的内容，每次总是显示其中一个页面。 我正在尝试使用VueJS的转换功能使此内容像旋转木马一样滑入/滑出。滑入/滑出的内容包含在单独的pug文件中，我将其包含在显示“旋转木马”的父pug中

我对使用常规HTML元素创建这种滑入/滑出效果没有问题，但似乎将这个转换元素包装在其他哈巴狗文件的包中似乎有点乱

所以我的父母哈巴狗文件看起来像这样

.
.
.
div.h-100(v-if="initialized")
  transition(name="slide" mode="out-in")
    #page-1.position-relative.h-100(v-show="step === 0")
      include ./_page-1-partial.pug
  transition(name="slide" mode="out-in")
    #page-2.position-relative.h-100(v-show="step === 1")
      include ./_page-2-partial.pug
  transition(name="slide" mode="out-in")
    #page-3.position-relative.h-100(v-show="step === 2")
      include ./_page-3-partial.pug

这是幻灯片类的css

  .slide-enter-active, .slide-leave-active {
    transition: all 0.75s ease-in-out;
  }
  .slide-enter {
    transform: translate(150%, 0);
  }

  .slide-enter-to, .slide-leave {
    transform: translate(0, 0);
  }

  .slide-leave-to {
    transform: translate(-150%, 0);
  }

但最终的结果是，如果我一步一步地设置，当前内容会滑出到左侧，但新内容不是从右侧滑入，而是立即出现

如果我退一步，当前内容会立即消失，新内容会从右侧滑入

---

我发现了我的实际问题时，是否有一些特殊的东西，包括PUG部分？事实上，我包括帕格部分并不是问题所在，只是因为两个部分同时存在，一个在另一个之上，并将其排除在视野之外。我通过将位置更改为绝对解决了这个问题

为什么要使用pug include而不是vue.js组件？与include相比，使用vue开发工具调试该组件更容易。话虽如此，但由此生成的实际呈现HTML是什么？如果删除所有

v-show=“…”

，使其他页面始终“可见”，只是从页面上翻译出来，会发生什么？