fix: restore main transfer pages with smooth routing

src/App.vue

@@ -5,7 +5,14 @@ import LanguageSwitcher from './components/common/LanguageSwitcher.vue'
 import AlertComponent from '@/components/common/AlertComponent.vue'
 import { useAppShell } from '@/composables'
 
-const { isDarkMode, isLoading, routeViewKey, showGlobalControls } = useAppShell()
+const {
+  isDarkMode,
+  isLoading,
+  routeTransitionMode,
+  routeTransitionName,
+  routeViewKey,
+  showGlobalControls
+} = useAppShell()
 </script>
 
 <template>
@@ -18,7 +25,7 @@ const { isDarkMode, isLoading, routeViewKey, showGlobalControls } = useAppShell(
       <div class="loading-spinner"></div>
     </div>
     <RouterView v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
+      <transition :name="routeTransitionName" :mode="routeTransitionMode">
         <component :is="Component" :key="routeViewKey" />
       </transition>
     </RouterView>
@@ -52,6 +59,30 @@ const { isDarkMode, isLoading, routeViewKey, showGlobalControls } = useAppShell(
   opacity: 0;
 }
 
+.transfer-fade-enter-active,
+.transfer-fade-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.transfer-fade-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.transfer-fade-leave-active {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  pointer-events: none;
+}
+
+.transfer-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
 .loading-overlay {
   position: fixed;
   top: 0;