feat: update loading shell transition and add exit animation transform

index.html

@@ -127,7 +127,6 @@
       background-color: var(--initial-loader-bg, #0E1116);
       block-size: var(--initial-loader-height, 100svh);
       inline-size: 100%;
-      transition: opacity 0.18s ease-out;
     }
 
     .loading-shell {
@@ -136,6 +135,7 @@
       grid-template-rows: minmax(0, 1fr) auto;
       block-size: 100%;
       inline-size: 100%;
+      transition: opacity 0.12s ease-out, transform 0.12s ease-out;
       padding:
         calc(env(safe-area-inset-top, 0px) + 24px)
         24px
@@ -171,8 +171,10 @@
       min-block-size: clamp(72px, 14vh, 120px);
     }
 
-    .loading-complete {
+    .loading-complete .loading-shell,
+    .loading-complete #loading-timeout {
       opacity: 0;
+      transform: translate3d(0, 6px, 0);
     }
 
     .loading {

src/App.vue

@@ -137,7 +137,7 @@ function startBackgroundRotation() {
 function animateAndRemoveLoader() {
   const loadingBg = document.querySelector('#loading-bg') as HTMLElement
   if (loadingBg) {
-    // 先淡出启动层，再移除节点，避免 iOS 在主题容器完全接管前露出底部空白。
+    // 只收掉启动内容，背景层保持实色直到节点被移除，避免底部 safe area 先透出页面内容。
     loadingBg.classList.add('loading-complete')
     window.setTimeout(() => {
       removeEl('#loading-bg')
@@ -145,7 +145,7 @@ function animateAndRemoveLoader() {
       // 启动阶段会锁定根节点滚动，待应用布局接管后再恢复，避免首屏出现瞬时纵向滚动条。
       document.documentElement.style.removeProperty('overflow')
       document.body.style.removeProperty('overflow')
-    }, 180)
+    }, 120)
   }
 }