GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-08 17:26:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix glass背景模糊延迟问题

Browse Source
This commit is contained in:
jxxghp
2026-08-31 08:20:53 +08:00
parent dd90d40703
commit 0e1a85fb7d
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/__tests__/glassOverlayMaterial.spec.ts
+6 -3
View File
@@ -138,14 +138,17 @@ describe('glass overlay material styles', () => {
expect(styles).toContain("&[data-glass-appearance='tinted'] .workflow-share-card")
})
it('composites glass dialogs at their final geometry instead of resampling a scaled backdrop', () => {
it('paints glass menus and dialogs with their final backdrop material on the first frame', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
expect(styles).toMatch(
/\.v-overlay__content\.mp-dialog-transition-enter-active[\s\S]*?transition:\s*opacity 120ms var\(--mp-motion-ease-standard\);/,
/:is\(\.v-menu, \.v-dialog\) > \.v-overlay__content\[class\*='-transition-enter-active'\]\s*\{[\s\S]*?opacity:\s*1 !important;[\s\S]*?transform:\s*none !important;[\s\S]*?transition:\s*none !important;/,
)
expect(styles).toMatch(
/\.v-overlay__content\.mp-dialog-transition-enter-from[\s\S]*?filter:\s*none;[\s\S]*?transform:\s*none;/,
/:is\(\.v-menu, \.v-dialog\) > \.v-overlay__content\[class\*='-transition-enter-from'\]\s*\{[\s\S]*?opacity:\s*1 !important;[\s\S]*?transform:\s*none !important;/,
)
expect(styles).toMatch(
/:is\(\.v-menu, \.v-dialog\) > \.v-overlay__scrim\.fade-transition-enter-active,[\s\S]*?opacity:\s*var\(--v-overlay-opacity, 0\.32\) !important;[\s\S]*?transition:\s*none !important;/,
)
})
src/styles/themes/glass.scss
+22 -5
View File
@@ -646,10 +646,29 @@ html[data-theme='glass'] {
}
}
// 弹层材质按最终几何一次合成，避免 transform/filter 动画反复重采样背景。
.v-overlay__content.mp-dialog-transition-enter-active,
// 菜单与弹窗的材质从首个绘制帧就使用最终状态，避免父层淡入让背景模糊看起来延迟生效。
:is(.v-menu, .v-dialog) > .v-overlay__content[class*='-transition-enter-active'] {
filter: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto;
}
:is(.v-menu, .v-dialog) > .v-overlay__content[class*='-transition-enter-from'] {
filter: none !important;
opacity: 1 !important;
transform: none !important;
}
:is(.v-menu, .v-dialog) > .v-overlay__scrim.fade-transition-enter-active,
:is(.v-menu, .v-dialog) > .v-overlay__scrim.fade-transition-enter-from {
opacity: var(--v-overlay-opacity, 0.32) !important;
transition: none !important;
}
// 关闭弹窗时仍保留轻量淡出，但不再缩放需要重新采样的材质层。
.v-overlay__content.mp-dialog-transition-leave-active,
.v-overlay__content.dialog-transition-enter-active,
.v-overlay__content.dialog-transition-leave-active {
filter: none;
transform: none;
@@ -657,9 +676,7 @@ html[data-theme='glass'] {
will-change: opacity;
}
.v-overlay__content.mp-dialog-transition-enter-from,
.v-overlay__content.mp-dialog-transition-leave-to,
.v-overlay__content.dialog-transition-enter-from,
.v-overlay__content.dialog-transition-leave-to {
filter: none;
transform: none;