Managing multiple 'pages' of content within a multi-step process can be challenging, especially when trying to incorporate VueJS's transition feature for a carousel-like slide in/out effect. The contents being transitioned are stored in separate pug files and included in the parent pug template that displays the "carousel".
While it may be easy to create a simple slide in/out effect with regular HTML elements, wrapping these transitions around included pug files seems to complicate things.
The structure of the parent pug file typically looks 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
The CSS classes used for the sliding effect are defined as follows:
.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);
}
However, you may encounter issues where transitioning from one step causes the current content to slide out left but the new content simply appears without sliding in from the right. Similarly, stepping down may result in the current content instantly disappearing while the new content slides in from the right.
If you face such challenges, consider any special considerations when including pug partials and their impact on transitions.