带有 Pug 部分的 VueJS 转换答案

【问题标题】：VueJS transitions with Pug partials带有 Pug 部分的 VueJS 转换
【发布时间】：2019-12-05 14:14:45
【问题描述】：

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

使用常规 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 部分的一些特别之处吗？

【问题讨论】：

你为什么使用 pug 包含而不是 vue.js 组件？使用 vue 开发工具比 include 更容易调试组件。话虽如此，由此生成的实际呈现的 HTML 是什么？
如果您删除所有 v-show="..." 以使其他页面始终“可见”，只是从页面中翻译出来，会发生什么情况？

标签： css vue.js pug

【解决方案1】：

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

【讨论】：