From 03b03be18128bc4adc79a2dd28242e4ebdf20d1b Mon Sep 17 00:00:00 2001
From: Jan Laupetin <jan@laupetin.net>
Date: Mon, 27 Oct 2025 21:37:43 +0100
Subject: [PATCH] chore: add blend between views in modman

---
 src/ModManUi/src/App.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/ModManUi/src/App.vue b/src/ModManUi/src/App.vue
index 08fc7fde..8902fee4 100644
--- a/src/ModManUi/src/App.vue
+++ b/src/ModManUi/src/App.vue
@@ -6,11 +6,17 @@ import ModManHeader from "./components/ModManHeader.vue";
   <main class="container">
     <ModManHeader />
 
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+      <Transition name="blend">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
   </main>
 </template>
 
 <style scoped lang="scss">
+@use "@style/variables";
+
 .container {
   margin: 0;
   display: flex;
@@ -19,4 +25,14 @@ import ModManHeader from "./components/ModManHeader.vue";
 
   height: 100vh;
 }
+
+.blend-enter-from,
+.blend-leave-to {
+  opacity: 0;
+}
+
+.blend-enter-active,
+.blend-leave-active {
+  transition: opacity 0.15s ease-in-out;
+}
 </style>