How to make animation on transition in vue?

Question

Vue.js

Let's say there are 2 pages, how to make it so that when switching to the second one, the first one leaves to the left and at the same time the second one leaves to the right and, as it were, pushes the first one out.
I'm trying to use a transition, but instead of what I want, the first page leaves, and then, when it is completely hidden, the second page suddenly appears.
Has anyone done something similar? Share a code example, please.

Answer 1

The transition has a mode="out-in" attribute for just such purposes.

Answer 2

You need the Animated Transitions section of the documentation, specifically the section on transition classes.
The bottom line is that you need to describe the animation of the appearance, disappearance and intermediate stages of the component with special classes, of which there are only 6. If your animation is called fade, then the class names will be: fade-enter-active , fade-leave-active , etc.
Take some ready-made example (or modify your own) and tweak the css properties in it, practice.
Here is a good example .