Better route transitions

src/App.vue

@@ -8,7 +8,7 @@ import AppHeader from './components/AppHeader.vue'
     <!-- keep relative for transition -->
     <div class="relative">
       <RouterView v-slot="{ Component, route }">
-        <Transition name="route">
+        <Transition :name="route.meta.transition">
           <Component
             :is="Component"
             :key="route.path" />

src/index.css

@@ -67,6 +67,30 @@
   position: absolute;
 }
 
+
+/* ROUTE TRANSITION - BACK */
+
+.route_back-move,
+.route_back-enter-active,
+.route_back-leave-active {
+  transition: all .8s ease;
+}
+
+.route_back-enter-from {
+  opacity: 0;
+  transform: translateX(-100vw);
+}
+
+.route_back-leave-to {
+  opacity: 0;
+  transform: translateX(100vw);
+}
+
+.route_back-leave-active {
+  position: absolute;
+}
+
+
 /* SLIDE LEFT */
 
 .slide_left-move,

src/router/index.ts

@@ -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