mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-08 17:26:41 +08:00
fix glass背景模糊延迟问题
This commit is contained in:
@@ -138,14 +138,17 @@ describe('glass overlay material styles', () => {
|
|||||||
expect(styles).toContain("&[data-glass-appearance='tinted'] .workflow-share-card")
|
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')
|
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
|
||||||
|
|
||||||
expect(styles).toMatch(
|
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(
|
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;/,
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -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.mp-dialog-transition-leave-active,
|
||||||
.v-overlay__content.dialog-transition-enter-active,
|
|
||||||
.v-overlay__content.dialog-transition-leave-active {
|
.v-overlay__content.dialog-transition-leave-active {
|
||||||
filter: none;
|
filter: none;
|
||||||
transform: none;
|
transform: none;
|
||||||
@@ -657,9 +676,7 @@ html[data-theme='glass'] {
|
|||||||
will-change: opacity;
|
will-change: opacity;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-overlay__content.mp-dialog-transition-enter-from,
|
|
||||||
.v-overlay__content.mp-dialog-transition-leave-to,
|
.v-overlay__content.mp-dialog-transition-leave-to,
|
||||||
.v-overlay__content.dialog-transition-enter-from,
|
|
||||||
.v-overlay__content.dialog-transition-leave-to {
|
.v-overlay__content.dialog-transition-leave-to {
|
||||||
filter: none;
|
filter: none;
|
||||||
transform: none;
|
transform: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user