Router View Transition

Specially when used with scrollBehavior. This library makes it easy to correctly restore the scroll after the entering view is visible!
Take a look at the demo to see the result by yourself:

➣ Check the code on Github
➣ Follow me on Twitter

Transition mode

Default Out-in In-out

Let's try out this demo! Because we are restoring the scroll position, we first need to scroll a bit! So scroll down a little bit.

⇣ Scroll Down ⇣

You used the default mode, which means both leaving and entering transitions trigger at the same time. Because of this, restoring the scroll position right away works correctly:

function scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

But that's not always the case, why don't you try out Out-in?

Go ahead, change the mode up there and try again 👇

Now that you scrolled so far, let's go somewhere else

router-view + transition can be hard...

`router-view` + `transition` can be hard...