2019-3-3

VueRouterで画面遷移時にトランジションをつける

参考プロジェクト

上のtwitter-list-image-viewerのreference/page-transitionブランチでは、VueRouter での画面遷移時にトランジションをつけている。

まだちゃんと動作する理由は把握しきれていないがメモとして動作の肝となる部分をメモ。

router.js

router.jsには以下のコードを記述している。

scrollBehavior (to, from, savedPosition) {
  const position = savedPosition || { x: 0, y: 0 }
  return new Promise((resolve, reject) => {
    router.app.$root.$once('triggerScroll', () => {
      router.app.$nextTick(() => {
        window.scrollTo({ top: position.y, left: position.x })
        resolve(position)
      })
    })
  })
},

動作する理由が一番わからない部分はこのコード。resolve(position)のタイミングで VueRouter が position への scrollTo を実行しているが、それだけでは画像詳細画面への遷移時に最上部までスクロールされなかった。

App.vue

<transition
  mode="out-in"
  :enter-active-class="transition.enterActiveClass"
  @after-leave="$root.$emit('triggerScroll')"
>
  <keep-alive include="HomePage,ListPage">
    <router-view />
  </keep-alive>
</transition>

テンプレートとして、上記コードを記載している。ここでは scrollBehavior で登録したイベントを発火させてるくらいで特別なことはしていない。