vue.js – How to transition "back" using Vue Router?

Question:

I'm doing a simple transition in a webapp (using animate.css) where the user clicks a button and the current component leaves the screen left and the other component comes in from right to left. But when I return to my initial component, the transition doesn't go the other way around.

How can I accomplish this? Is there any property on Vue's transition to make it go the other way around?

Example of properties below:

<transition name="router-anim" leave-active-class="animated slideOutLeft faster" enter-active-class="animated slideInRight faster" mode="out-in">
   <router-view></router-view>
</transition>

Answer:

There is this example in the repository itself that how is it possible to do this. You need to dynamically pass the animation through a property. To define which animation to use and when to use it you can use the "beforeRouteUpdate" function and compare the "to" with the "from". Below is a small example based on the link above.

beforeRouteUpdate (to, from, next) {
    this.transitionName = to.path === "rota2" ? 'slide-right' : 'slide-left'
    next()
}
Scroll to Top