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'
-
+
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