How to perform a "back" Transition using Vue Router?

Asked

Viewed 136 times

3

I’m making a simple transition in a webapp (using Animate.css), where the user clicks on a button and the current component leaves the screen on 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 Vue’s Transition for it to accomplish the opposite path?

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 css-transitions vue-router transition

  • Are you using a transition library or have you made your transitions yourself? If you did it yourself, you could post CSS as well.

  • I’m using Animate.css but regardless of the animation I can’t get the order "going" and "back" from it

  • I understand, it is to facilitate our understanding of your problem... There could be something wrong with your CSS, but you can see that this is not the case. If you can, add in the question that you are using Animate.css

  • Dude, I made this Jsfiddle and in it is working the animation, both by clicking on the routes and using history.back()

  • my problem is that if you repair the animation always comes from right to left, when I clicked on the "back" it was to go in the opposite direction

  • I understood, but then I would have to have a structure to know when a route would be coming back, to then reverse the classes of Transition... the hole is further down anyway

Show 1 more comment

1 answer

1

Has that example in the repository itself that how is it possible to do this. You need to pass the animation dynamically through a property. To define which animation to use and when to use it you can use the "beforeRouteUpdate" function and compare "to" to "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()
}

Browser other questions tagged vue.js css-transitions vue-router transition

You are not signed in. Login or sign up in order to post.