How to make transition when switching on router?

Question

Vue.js

Actually, there are 3 routes and on each page, there is text and a picture, I need to make sure that when I click on the router-link, first the picture and text leave the current page to the left, and the page I switch to, another picture and text arrive.
I'm doing a transition effect inside the router, but I can't find an example how to attach it to the navigation buttons that switches the router. Maybe someone did or saw an example? Give me a link. Thanks in advance.

Answer 1

If you need to sequentially play an animation with pictures and text, and then switch to a new route, you can use callback transitionendor animationend, and then switch to a new route.
As a result:
1. Starting the animation of the disappearance of elements
2. In callbacks transitionendor animationendcalling router.push('new page')
3. Playing the animation when a new page appears
But maybe the animation of the transition from one route to another will suit you, then just use it, applying the desired animation:

<transition>
  <router-view></router-view>
</transition>

Documentation:
https://ru.vuejs.org/v2/guide/transitions.html#Sov...
https://router.vuejs.org/ru/advanced/transitions.html