fix(theme): always expand NEW layer and explicitly set html background
When turning Dark off (Dark -> Light transition), the NEW layer is Light. Previously we tried shrinking the OLD layer (Dark) over it, but if the root snapshot captured a transparent html, revealing the transparent layer produced no visual change. Now we: 1. Always keep the NEW layer on top (z-index: 2). 2. Always animate the NEW layer expanding from 0 to max radius. 3. Explicitly set background-color on html in input.css to ensure the VT root snapshots are fully opaque, avoiding transparent captures that make expansions invisible. 4. Add background: var(--color-paper-theme) directly to ::view-transition-new just to be absolutely certain it's painted opaque.
This commit is contained in:
parent
93d3858a37
commit
065302544d
@ -29,6 +29,7 @@
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background-color: var(--color-paper-theme);
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@ -8,35 +8,16 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
设计策略:
|
||||
无论方向,我们始终让“暗色层”在上面,并对其使用 clip-path。
|
||||
- 亮->暗:NEW 是暗色,放在上层,从小圆扩展。
|
||||
- 暗->亮:OLD 是暗色,放在上层,从大圆收缩。
|
||||
这样就能保证无论哪个方向,都是“暗色吞噬亮色”或“亮色穿透暗色”。
|
||||
========================================================================= */
|
||||
|
||||
/* 默认情况:从暗到亮 (Dark -> Light)
|
||||
此时 DOM 上的 .dark 已经被移除,目标是亮色(NEW)。
|
||||
策略:把暗色旧图(OLD)放在上层,缩小它的 clip-path,揭开底部的亮色新图(NEW)。 */
|
||||
/* 无论什么方向,始终让 new (新状态) 在上方,并从小圆扩展覆盖 old */
|
||||
::view-transition-old(root) {
|
||||
z-index: 2;
|
||||
animation: tt-shrink 0.4s ease-out forwards;
|
||||
}
|
||||
::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 切换到暗色情况:从亮到暗 (Light -> Dark)
|
||||
此时 DOM 上已加上 .dark,目标是暗色(NEW)。
|
||||
策略:把暗色新图(NEW)放在上层,放大它的 clip-path,覆盖底部的亮色旧图(OLD)。 */
|
||||
.dark::view-transition-old(root) {
|
||||
z-index: 1;
|
||||
animation: none;
|
||||
}
|
||||
.dark::view-transition-new(root) {
|
||||
::view-transition-new(root) {
|
||||
z-index: 2;
|
||||
animation: tt-expand 0.4s ease-out forwards;
|
||||
/* 显式给伪元素加上不透明背景,防止截图透明导致看不到覆盖效果 */
|
||||
background: var(--color-paper-theme);
|
||||
}
|
||||
|
||||
/* CSS 变量由 JS 注入到 html style 中 */
|
||||
@ -45,11 +26,6 @@
|
||||
to { clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y)); }
|
||||
}
|
||||
|
||||
@keyframes tt-shrink {
|
||||
from { clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y)); }
|
||||
to { clip-path: circle(0px at var(--tt-x) var(--tt-y)); }
|
||||
}
|
||||
|
||||
/* 在 View Transition 期间强制禁用所有 CSS 过渡,
|
||||
确保 VT 回调中 toggle dark class 后截图捕获的是最终颜色。 */
|
||||
html.is-theme-transitioning,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user