Make scrollBehavior work with transitions by handling a promise (fixes #1263)

[homerjam]

As stated in the discussion in #1263 this currently works by enabling an arbitrary delay to be used within the scrollBehavior handler. A better solution would use an event handler on the router view or at least allow us to get the transition duration. Unfortunately I don't think this is possible - AFAIK we don't have access to the view from within scrollBehavior.

[homerjam]

Not sure why tests are working locally but not on CI, anyone?

[blake-newman]

@homerjam just rerun the tests to ensure it was not something CI end. Looks like it is a consistent failure. Could be something to do with the test implementation.

Could you try something more specific that just a setTimeout. Perhaps use the transition API to hook into when the animation is complete. https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

There are events you can hook into, that should give you the desired affect. https://vuejs.org/v2/api/#transition

[homerjam]

Hi @blake-newman, I tracked down the test issue to me using async/await which didn't work in phantomjs.

Re. the transition API - that was one of my initial thoughts, however by my understanding we're unable to use it programatically from the scrollBehavior hook. But I think the user could maybe use it to emit an event which the scrollBehavior hook then listens for (I'm pretty new to Vue so assuming it's possible to emit/listen to events on the root/app).

[homerjam]

Hey @pi0 any thoughts on this re. how it tackles nuxt/nuxt#1376?

[yyx990803]

Although this does not automatically solve the transition problem, it does expose a useful async primitive for users to tackle this problem in userland.

[hackuun]

Will it be documented, how to use this primitive?

[yyx990803]

See https://router.vuejs.org/en/advanced/scroll-behavior.html at bottom