我在一个多步骤过程中拥有多个“页面”内容，其中总是一次显示这些页面之一。 我正在尝试使用VueJS的过渡功能使此内容像轮播一样滑入/滑出。滑入/滑出的内容包含在单独的哈巴狗文件中，我将其包含在显示“轮播”的父哈巴狗中。

使用常规的HTML元素创建这张幻灯片的导入/导出效果没有问题，但是似乎将这个过渡元素包装在其他哈巴狗文件的内容周围似乎有些混乱。

所以我的父母pug文件看起来像这样

.
.
.
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局部的特殊信息？