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,4 +1,5 @@
 <template>
+  <div>
     <ImageCarousel ref="imageCarousel" />
     <v-row>
       <v-col cols="12">
@@ -81,9 +82,18 @@
         </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,