Better route transitions

2022-02-18 19:55:51 +01:00
parent 5029d1da9c
commit 65406a222d
3 changed files with 43 additions and 1 deletions
@@ -9,18 +9,36 @@ const router = createRouter({
      path: '/',
      name: 'home',
      component: HomeView,
+      meta: { transition: '' },
    },
    {
      path: '/daily',
      name: 'daily',
      component: () => import('../views/GameView.vue'),
+      meta: { transition: 'route' },
    },
    {
      path: '/random',
      name: 'random',
      component: () => import('../views/GameView.vue'),
+      meta: { transition: 'route' },
    },
  ],
 })

+router.afterEach((to, from) => {
+  // No transition when direct access
+  if (!from.name) {
+    to.meta.transition = ''
+  }
+  // Back animation when going back to home
+  else if (to.path === '/') {
+    to.meta.transition = 'route_back'
+  }
+  // Normal forward animation
+  else {
+    to.meta.transition = 'route'
+  }
+})
+
 export default router