Allow specifying different transitions for navigation and popstate

[yyx990803]

Sometimes different page transitions are needed when clicking a link vs. clicking the back button.

[altitudems]

Does this mean we can have transitions that go back and forth between pages in a single page app?

I would be happy to see that. Maybe we could eventually get to do something like this?
http://www.appcoda.com/wp-content/uploads/2015/03/vid08.gif

[lesion]

+1
I would love a way to specify to vue-router that transitions has to be done in reverse order

[vwxyutarooo]

Is there any updated?

[ccqgithub]

How about this feature now ?

[chasebank]

Until this get's an official solution, the method I've settled for is setting a "depth" meta property for each route. Then when the route changes, check whether the new route depth is higher or lower than the previous. If it's higher, transition from right, if it's lower (going back) transition from left.

Not ideal and could be a nightmare to maintain, but get's the job done for simple implementations.

  { 
    name: 'categories',
    path: '/categories',
    component: categories,
    meta: { depth: 1 },
  },
  { 
    name: 'category',
    path: '/categories/:category/',
    component: category,
    meta: { depth: 2 },
  }

<transition :name="transitionDirection">
  <router-view></router-view>
</transition>

data() {
  return {
    transitionDirection: 'slide-left',
  }
},
watch: {
  '$route' (to, from) {
    const toDepth = to.meta.depth
    const fromDepth = from.meta.depth
    this.transitionDirection = toDepth < fromDepth ? 'slide-right' : 'slide-left';
  }
}

.slide-left-enter,
.slide-right-leave-active {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
}

.slide-right-enter,
.slide-left-leave-active {
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}

Or, if it's a super simple application, rather than set the depth manually, you can rely on the "depth" of the route path. app/categories < app/categories/:category < app/categories/:category/:post

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionDirection = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

[jasonhibbs]

Transitions are extremely clumsy when using the swipe back gesture on iOS because they fire after the user has already reached the destination.

Being able to disable transitions when a forward/back button or browser gesture is used would be very helpful.

[valgeirb]

Transitions are extremely clumsy when using the swipe back gesture on iOS because they fire after the user has already reached the destination.

Being able to disable transitions when a forward/back button or browser gesture is used would be very helpful.

Have you found a work-around? I'm really struggling with transitions and swipe back gestures on iOS.

[jasonhibbs]

Have you found a work-around? I'm really struggling with transitions and swipe back gestures on iOS.

I never found a workaround, just this issue

[posva]

Closing in favor of #3453 which would effectively allow this by using $route.navigation.type or similar