diff --git a/index.html b/index.html index 946408d5..0e75ee92 100644 --- a/index.html +++ b/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 { diff --git a/src/App.vue b/src/App.vue index a58ee1ab..2cc8677f 100644 --- a/src/App.vue +++ b/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) } }