VueJS 转换与 Pug 部分

Question

I have multiple 'pages' of content in a multi-step process where always one of these pages is shown at a time. I am trying to use VueJS's transition feature to make this content slide in / out like a carousel. The contents that are sliding in / out are contained in seperate pug files, which I am including in my parent pug that displays the "carousel".

I had no problem creating this slide in / out effect with regular HTML elements, but it seems like wrapping this transition element around includes of other pug files seems to mess with it somewhat.

So my parent pug file looks something like this

.
.
.
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

This is the css for the slide classes

  .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);
  }

But what ends up happening is if I set up by one step, the current content slides out to the left, but instead of the new content sliding in from the right, it just instantly appears.

And if I step down by one step, the current content instantly disappears, and the new content slides in from the right.

Is there something special about including pug partials that I need to consider when trying to work with these sorts of transitions?

Answer 1

I have found my actual problem. The fact that I am including pug partials was not the problem, it was simply that with both partials existing at the same time, one was above the other and pushing it out of view. I solved this by changing the positions to absolute