Vue-router: Another detail of scrollBehavior wrapped in transition

[nickforddesign]

Version

2.5.2

Reproduction link

http://jsfiddle.net/xctnu8r3/2/

Steps to reproduce

Wrapping a router-view in a 2-way transition (like a fade), and scrollBehavior returns { x: 0, y: 0 }.

Click Post 1, scroll down just a little, then click Home.

What is expected?

Scrolling shouldn't take place until after the in-out transition has completed.

What is actually happening?

The router-view scrolls to the top immediately, before the transition begins, resulting in an undesirable content flicker (which looks much worse in a real scenario with actual content).

[posva]

Fixing this should also fix #1263

[jvandenaardweg]

Experiencing the same problem as described above

[purepear]

me too

[purepear]

i ended up using transition hook :)

transition(name="fade", mode="out-in", appear, @after-leave="afterLeave")

methods: {
  afterLeave (el) {
    window.scroll(0, 0)
  }
}

[Atinux]

I think this shows a little bit more the issue: http://jsfiddle.net/9hvo46o1/1/

[purepear]

@Atinux http://jsfiddle.net/9hvo46o1/3/

[Atinux]

@purepear it's a temporary solution and I'm looking for a permanent solution for Nuxt.js without any hacks.

[purepear]

Hi @Atinux I've never used Nuxt so i'm not familiar with the problem there but transition and router-view are part of different libraries and i'm not sure if coupling things will be good. Hooks don't seem so hackish/temporary to me .. that's what they are made for :) ... but again .. i'm not familiar with Nuxt

[posva]

Closing as dup of #1263