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 部分的事實不是問題，只是因為兩個部分同時存在，一個在另一個之上並將其推到視野之外。 我通過將位置更改為絕對來解決這個問題