VueJS 转换与 Pug 部分

Question

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

我使用常规 HTML 元素创建此滑入/滑出效果没有问题，但似乎将此过渡元素包裹在其他 pug 文件的包含中似乎有些混乱。

所以我的父 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 部分是否有什么特别之处？

Answer 1

我发现了我的实际问题。 我包含 pug 部分的事实不是问题，只是因为两个部分同时存在，一个在另一个之上并将其推到视野之外。 我通过将位置更改为绝对来解决这个问题