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()
}