css - VueJS 转换与 Pug partials

Question

我在多步骤过程中有多个内容“页面”，每次总是显示其中一个页面。我正在尝试使用 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 部分的一些特别之处吗？

Answer 1

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