Add page transitions

assets/variables.scss

@@ -47,3 +47,26 @@ p a {
         color: rgb(var(--v-theme-primary));
     }
 }
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.2s;
+}
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(50px, 0);
+}

middleware/transition.global.ts

@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  if (typeof to.meta.pageTransition === 'object' && typeof from.meta.pageTransition === 'object') {
+    if (typeof to.meta.id !== 'number' || typeof from.meta.id !== 'number') return
+    
+    const transition = to.meta.id > from.meta.id ? 'slide-left' : 'slide-right'
+    to.meta.pageTransition.name = from.meta.pageTransition.name = transition
+  }
+})

pages/bio.vue

@@ -59,6 +59,14 @@
 </template>
 
 <script>
+definePageMeta({
+  id: 2,
+  pageTransition: {
+    name: 'slide',
+    mode: 'out-in'
+  }
+})
+
 import _groupBy from 'lodash-es/groupBy'
 
 export default {

pages/imprint.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
   <v-card class="mb-2">
     <v-card-item>
       <v-card-title>Offenlegung nach § 25 Mediengesetz</v-card-title>
@@ -960,11 +961,17 @@
     </p>
     </v-card-text>
   </v-card>
+  </div>
 </template>
 
 <script>
+definePageMeta({
+  id: 4,
+  pageTransition: false
+})
+
 export default {
-  name: 'ImprintPage',
+  name: 'ImprintPage'
 }
 </script>
 

pages/index.vue

@@ -31,6 +31,14 @@
 </template>
 
 <script>
+definePageMeta({
+  id: 1,
+  pageTransition: {
+    name: 'slide',
+    mode: 'out-in'
+  }
+})
+
 export default {
   name: 'IndexPage'
 }

pages/portfolio.vue

@@ -1,89 +1,99 @@
 <template>
-  <ImageCarousel ref="imageCarousel" />
+  <div>
-  <v-row>
+    <ImageCarousel ref="imageCarousel" />
-    <v-col cols="12">
+    <v-row>
-      <span class="text-h5 font-weight-medium">
+      <v-col cols="12">
-        {{ $t('portfolioTitle') }}
+        <span class="text-h5 font-weight-medium">
-      </span>
+          {{ $t('portfolioTitle') }}
-    </v-col>
+        </span>
-    <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
+      </v-col>
-      <v-card height="100%" class="d-flex flex-column">
+      <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
-        <v-carousel
+        <v-card height="100%" class="d-flex flex-column">
-          v-model="carouselIndex[index]"
+          <v-carousel
-          :show-arrows="project.images.length > 1 ? 'hover' : false"
+            v-model="carouselIndex[index]"
-          :hide-delimiters="project.images.length <= 1"
+            :show-arrows="project.images.length > 1 ? 'hover' : false"
-          height="auto"
+            :hide-delimiters="project.images.length <= 1"
-        >
+            height="auto"
-          <v-carousel-item v-for="image of project.images" :key="image"
-            :src="`${cdn}${image}`"
-            :class="project.class"
-            @click="showImageCarousel(project.images, carouselIndex[index])"
-          ></v-carousel-item>
-        </v-carousel>
-        <v-card-item>
-          <v-card-title class="d-flex">
-            <span>{{ project.title }}</span>
-            <v-spacer></v-spacer>
-            <v-btn
-              v-if="project.repoUrl"
-              variant="text"
-              icon="mdi-github"
-              density="comfortable"
-              color="on-surface"
-              :href="`https://${project.repoUrl}`"
-              target="_blank"
-              class="link"
-            />
-            <v-btn
-              v-if="project.projectUrl"
-              variant="text"
-              icon="mdi-open-in-new"
-              density="comfortable"
-              color="on-surface"
-              :href="`https://${project.projectUrl}`"
-              target="_blank"
-              class="link"
-            />
-          </v-card-title>
-          <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
-        </v-card-item>
-        <v-card-text>{{ $t(project.description) }}</v-card-text>
-        <v-spacer></v-spacer>
-        <v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
-          <img v-for="t of project.tech" :key="tech[t].title"
-            :src="generateBadgen(tech[t].title, tech[t].icon)"
-            :height="20"
-            class="ma-1"
-          />
-
-          <!-- colored badges
-          <img v-for="t of project.tech" :key="tech[t].title"
-            :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
-            :height="20"
-            class="ma-1"
-          />
-          -->
-
-          <!-- colored badges w/ links to brand websites
-          <a v-for="t of project.tech" :key="tech[t].title"
-            :href="`https://${tech[t].projectUrl}`"
-            target="_blank"
           >
+            <v-carousel-item v-for="image of project.images" :key="image"
+              :src="`${cdn}${image}`"
+              :class="project.class"
+              @click="showImageCarousel(project.images, carouselIndex[index])"
+            ></v-carousel-item>
+          </v-carousel>
+          <v-card-item>
+            <v-card-title class="d-flex">
+              <span>{{ project.title }}</span>
+              <v-spacer></v-spacer>
+              <v-btn
+                v-if="project.repoUrl"
+                variant="text"
+                icon="mdi-github"
+                density="comfortable"
+                color="on-surface"
+                :href="`https://${project.repoUrl}`"
+                target="_blank"
+                class="link"
+              />
+              <v-btn
+                v-if="project.projectUrl"
+                variant="text"
+                icon="mdi-open-in-new"
+                density="comfortable"
+                color="on-surface"
+                :href="`https://${project.projectUrl}`"
+                target="_blank"
+                class="link"
+              />
+            </v-card-title>
+            <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
+          </v-card-item>
+          <v-card-text>{{ $t(project.description) }}</v-card-text>
+          <v-spacer></v-spacer>
+          <v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
+            <img v-for="t of project.tech" :key="tech[t].title"
+              :src="generateBadgen(tech[t].title, tech[t].icon)"
+              :height="20"
+              class="ma-1"
+            />
+
+            <!-- colored badges
             <img v-for="t of project.tech" :key="tech[t].title"
               :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
               :height="20"
               class="ma-1"
             />
-          </a>
+            -->
-          -->
 
-        </v-card-actions>
+            <!-- colored badges w/ links to brand websites
-      </v-card>
+            <a v-for="t of project.tech" :key="tech[t].title"
-    </v-col>
+              :href="`https://${tech[t].projectUrl}`"
-  </v-row>
+              target="_blank"
+            >
+              <img v-for="t of project.tech" :key="tech[t].title"
+                :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
+                :height="20"
+                class="ma-1"
+              />
+            </a>
+            -->
+
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script>
+definePageMeta({
+  id: 3,
+  pageTransition: {
+    name: 'slide',
+    mode: 'out-in'
+  }
+})
+
 import { badgen } from 'badgen'
 import { siAndroid, siAmazonaws, siMicrosoftazure, siFirebase, siGithub,
   siHeroku, siCoffeescript, siYoutubegaming, siMysql, siNuxtdotjs, siPhp,