fix(ui): 首屏背景提前设置 + 页面淡入过渡
- App 首帧前同步主题窗口背景,减少深浅色下系统底色闪烁 - 页面根容器增加 0.24s 淡入动画,Tab 切换/进入更平滑
This commit is contained in:
@@ -10,12 +10,19 @@
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-page, #ffffff);
|
||||
box-sizing: border-box;
|
||||
animation: page-fade-in 0.24s ease both;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-page, #191919);
|
||||
box-sizing: border-box;
|
||||
animation: page-fade-in 0.24s ease both;
|
||||
}
|
||||
|
||||
@keyframes page-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 变量定义 */
|
||||
|
||||
@@ -7,6 +7,11 @@ import { refreshSession, ensureSessionFresh } from './utils/session'
|
||||
import './app.scss'
|
||||
|
||||
class App extends Component<PropsWithChildren> {
|
||||
componentWillMount() {
|
||||
// 首帧前先把原生窗口背景切成当前主题,避免深色/浅色下先闪系统默认色
|
||||
applyPageBackground(resolveTheme(getTheme()))
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// 启动最早时机同步页面背景,避免自定义导航区在深色模式下闪白
|
||||
applyPageBackground(resolveTheme(getTheme()))
|
||||
|
||||
Reference in New Issue
Block a user