feat: add transitions between pages

src/App.vue

@@ -59,7 +59,11 @@ const close = () => {
     <LanguageButton>
       <LanguageIcon @click.prevent="showModal()" />
     </LanguageButton>
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
+        <component :is="Component" :key="$route.path" />
+      </Transition>
+    </RouterView>
   </main>
 
   <SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>

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: [
     {

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;
+  }
+}

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);
+}

src/views/AnatomyView.vue

@@ -15,6 +15,7 @@ const colors = [
 </script>
 
 <template>
+  <article>
     <section>
       <h1>{{ $t(`${$route.meta.title}`) }}</h1>
     </section>
@@ -160,4 +161,5 @@ const colors = [
     <section>
       <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
     </section>
+  </article>
 </template>

src/views/AttributionsView.vue

@@ -25,6 +25,7 @@ const attributions = [
 </script>
 
 <template>
+  <article>
     <section>
       <h1>{{ $t(`${$route.meta.title}`) }}</h1>
       <h2>{{ $t('attributions.artwork.heading') }}</h2>
@@ -44,7 +45,11 @@ const attributions = [
         <tr>
           <td>{{ $t('attributions.other.icons[0]') }}</td>
           <td>
-          <a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer">
+            <a
+              href="https://fontawesome.com/license/free"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               Font Awesome
             </a>
           </td>
@@ -94,4 +99,5 @@ const attributions = [
         </tr>
       </tbody>
     </table>
+  </article>
 </template>

src/views/CareerPathView.vue

@@ -26,6 +26,7 @@ const jobIcons = [
 </script>
 
 <template>
+  <article>
     <section>
       <h1>{{ $t(`${$route.meta.title}`) }}</h1>
       <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
@@ -42,4 +43,5 @@ const jobIcons = [
         </template>
       </TimelineItem>
     </TimelineList>
+  </article>
 </template>

src/views/GeneralView.vue

@@ -48,6 +48,7 @@ const sexData = [
 </script>
 
 <template>
+  <article>
     <section>
       <h1>{{ $t(`${$route.meta.title}`) }}</h1>
     </section>
@@ -68,4 +69,5 @@ const sexData = [
     <section>
       <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
     </section>
+  </article>
 </template>

src/views/HomeView.vue

@@ -3,6 +3,7 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
 </script>
 
 <template>
+  <article>
     <WelcomeHeader>
       <template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
       <template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
@@ -13,4 +14,5 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
 
       <p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
     </section>
+  </article>
 </template>