I have three elements that I would like to display with a transition effect when they appear or disappear.
There is one main element and the other two show up when you click the corresponding button. You can view my current code sample here: https://jsfiddle.net/5aq1k05L/
<transition :name="'step_' + currentView" mode="out-in">
<component :is="currentView"></component>
</transition>
CSS:
.step_componentA-enter-active {
transition: transform 0.4s;
}
.step_componentA-leave-active {
transition: transform 0s;
}
.step_componentA-enter {
transform: translateX(-100%);
}
.step_mainComponent-leave-active {
transition: transform 0.3s;
}
.step_mainComponent-leave-to {
transform: translateX(-100%);
}
.step_componentB-enter-active {
transition: transform 0.4s;
}
.step_componentB-leave-active {
transition: transform 0s;
}
.step_componentB-enter {
transform: translateX(100%);
}
My goal:
When I click on the "componentA" button, I want that element to slide in from the left while "mainComponent" remains visible in the background (not disappearing as it does currently) during the transition.
The same effect is desired for "componentB", except it will slide in from the right and return to the right upon clicking back.
What am I overlooking? https://jsfiddle.net/5aq1k05L/