From 65406a222d8c66284cd3dc7c8998368734be4c27 Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Fri, 18 Feb 2022 19:55:51 +0100
Subject: [PATCH] Better route transitions

---
 src/App.vue         |  2 +-
 src/index.css       | 24 ++++++++++++++++++++++++
 src/router/index.ts | 18 ++++++++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index d17201a..0131a54 100644
--- a/src/App.vue
+++ b/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" />
diff --git a/src/index.css b/src/index.css
index 3b9c1dd..651143c 100644
--- a/src/index.css
+++ b/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,
diff --git a/src/router/index.ts b/src/router/index.ts
index b4b6f00..520cfd2 100644
--- a/src/router/index.ts
+++ b/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