Vue.js animation: Enter after Leave and not simultaneously

Question

I have two components and a fade-in/fade-out animation set up for them.
For a brief moment, both components exist on the page at different opacities, and the scrollbar shows up and disappears.
Is there a way to avoid this? A way to start the fade-in animation only after the fade-out animation is done?

The Animation:

.view-leave-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}

.view-enter-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
    transition-delay: 0.5s; /* Increasing this doesn't seem to work */
}

.view-enter, .view-leave-to {
    opacity: 0.5; /* It should be 1, but setting it to 0.5 allows you to see exactly what's happening */
}

.view-enter-to, .view-leave {
    opacity: 1;
}

Any help would be very much appriciated!

Answer 1

To further elaborate on my comment: VueJS transition components support the mode property, where you can specify the sequence of transitions when toggling between two elements.

Since you do not want both elements to appear at the same time when one is transitioning in while the other is transitioning out, you should be using:

mode="out-in"

Based on the documentation:

out-in: Current element transitions out first, then when complete, the new element transitions in.