GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-08-18 12:14:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(glass): preserve material during route transitions (#611)

Browse Source
This commit is contained in:
InfinityPacer
2026-07-31 14:35:08 +08:00
committed by GitHub
parent 246b8ff54b
commit 41a36e2279
12 changed files with 532 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/__tests__/glassOverlayMaterial.spec.ts
View File

@@ -131,4 +131,12 @@ describe('glass overlay material styles', () => {
/\[data-glass-scroll-presentation='native'\][\s\S]*?:where\([\s\S]*?--glass-native-surface-backdrop-filter/,
)
})
it('keeps frosted route opacity static while preserving its short movement', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
expect(styles).toMatch(
/\[data-glass-appearance='frosted'\]\[data-page-presentation-motion='active'\]\s+\.mp-page-route\s*\{[\s\S]*?opacity:\s*1;[\s\S]*?transform:\s*translate3d\(0,\s*var\(--mp-page-motion-translate-y,\s*0\),\s*0\);/,
)
})
})

24
src/styles/common.scss
View File

@@ -266,25 +266,7 @@ html[data-theme-radius='extra'] {
.mp-page-route {
inline-size: 100%;
min-block-size: 100%;
}
.mp-page-route--entering {
animation: mp-page-route-enter var(--mp-motion-duration-page) var(--mp-motion-ease-standard) both;
will-change: opacity, transform;
}
@keyframes mp-page-route-enter {
from {
filter: blur(1px);
opacity: 0;
transform: translate3d(0, 0.5rem, 0) scale(0.992);
}
to {
filter: blur(0);
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
transform-origin: center top;
}
.mp-page-enter-active,
@@ -410,10 +392,6 @@ html[data-theme-radius='extra'] {
}
@media (prefers-reduced-motion: reduce) {
.mp-page-route--entering {
animation-duration: 1ms !important;
}
.mp-page-enter-active,
.mp-page-leave-active,
.mp-dialog-transition-enter-active,

16
src/styles/themes/glass.scss
View File

@@ -325,14 +325,6 @@ html[data-theme='glass'] {
}
// 页面 DOM 与 scroll renderer 共用同一 motion 时钟；canvas 本身保持壁纸坐标不动。
.mp-page-route--entering {
animation: none;
filter: none;
opacity: 1;
transform: none;
will-change: auto;
}
&[data-page-presentation-motion='active'] .mp-page-route {
filter: none;
opacity: var(--mp-page-motion-opacity, 1);
@@ -341,6 +333,14 @@ html[data-theme='glass'] {
will-change: opacity, transform;
}
// 磨砂保持最终材质权重，只复用页面呈现时间线做短距离位移。
&[data-glass-appearance='frosted'][data-page-presentation-motion='active'] .mp-page-route {
filter: none;
opacity: 1;
transform: translate3d(0, var(--mp-page-motion-translate-y, 0), 0);
will-change: transform;
}
:where(
.app-surface:not(.no-blur),
.v-card:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),