From 68a43b6b9c53b99df25defc8edfd4e2d086b92ce Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Mon, 4 Sep 2023 22:11:34 +0200 Subject: [PATCH] feat: add transitions between pages --- src/App.vue | 6 +- src/router/index.ts | 6 +- src/scss/base.scss | 9 ++ src/scss/main.scss | 11 ++ src/views/AnatomyView.vue | 238 +++++++++++++++++---------------- src/views/AttributionsView.vue | 144 ++++++++++---------- src/views/CareerPathView.vue | 32 ++--- src/views/GeneralView.vue | 32 ++--- src/views/HomeView.vue | 18 +-- 9 files changed, 269 insertions(+), 227 deletions(-) diff --git a/src/App.vue b/src/App.vue index 9230c4f..c48ef1c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -59,7 +59,11 @@ const close = () => { - + + + + + v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim diff --git a/src/router/index.ts b/src/router/index.ts index a879e36..5fc5326 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -10,7 +10,11 @@ import CircleInfoIcon from '@/assets/icons/CircleInfoIcon.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), scrollBehavior: () => { - return { top: 0 } + return new Promise((resolve) => { + setTimeout(() => { + resolve({ top: 0 }) + }, 500) + }) }, routes: [ { diff --git a/src/scss/base.scss b/src/scss/base.scss index a783f62..cdddb31 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -43,6 +43,8 @@ --page-background-image: url(@/assets/layered-waves-light.svg); --page-background-image-height: 100vw; --page-background-image-max-height: 50vh; + --page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); + --page-transform: translateY(5em); --paragraph-margin: 1rem; @@ -286,3 +288,10 @@ --navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left)); } } + +@media (prefers-reduced-motion) { + :root { + --page-transition: opacity 0.5s ease; + --page-transform: none; + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 71dbc42..ae2af74 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -171,3 +171,14 @@ table { } } } + +.fade-enter-active, +.fade-leave-active { + transition: var(--page-transition); +} + +.fade-enter-from, +.fade-leave-to { + opacity: 0; + transform: var(--page-transform); +} diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue index d029410..1798e26 100644 --- a/src/views/AnatomyView.vue +++ b/src/views/AnatomyView.vue @@ -15,149 +15,151 @@ const colors = [ - + :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`" + loading="lazy" + /> + - - + + -
-

{{ p }}

-
+
+

{{ p }}

+
+ diff --git a/src/views/AttributionsView.vue b/src/views/AttributionsView.vue index a122106..4af3c33 100644 --- a/src/views/AttributionsView.vue +++ b/src/views/AttributionsView.vue @@ -25,73 +25,79 @@ const attributions = [ diff --git a/src/views/CareerPathView.vue b/src/views/CareerPathView.vue index a67c3f8..d6e28d1 100644 --- a/src/views/CareerPathView.vue +++ b/src/views/CareerPathView.vue @@ -26,20 +26,22 @@ const jobIcons = [ diff --git a/src/views/GeneralView.vue b/src/views/GeneralView.vue index 1248114..bfdb6ba 100644 --- a/src/views/GeneralView.vue +++ b/src/views/GeneralView.vue @@ -48,24 +48,26 @@ const sexData = [ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 8d7d629..830e290 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -3,14 +3,16 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'