How to perform a "back" transition using the Vue Router?

Question

How to perform a "back" transition using the Vue Router?

Navigation

#1 by (0 votes)

2

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

How can I accomplish this? Is there any property in the Vue's transition so that it goes the other way?

Example of the 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>

vue.js transition vue-router

asked by anonymous 25.09.2018 / 23:50

1 answer

On ("Click") JavaScript does not work [duplicate] Remove Packet TClientDataSet

score 0 · Answer 1

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

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