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:
xfy 2026-06-26 18:17:13 +08:00
parent 93d3858a37
commit 065302544d
2 changed files with 5 additions and 28 deletions

View File

@ -29,6 +29,7 @@
@layer base { @layer base {
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
background-color: var(--color-paper-theme);
} }
body { body {

View File

@ -8,35 +8,16 @@
display: block; display: block;
} }
/* ========================================================================= /* 无论什么方向,始终让 new (新状态) 在上方,并从小圆扩展覆盖 old */
设计策略
无论方向我们始终让暗色层在上面并对其使用 clip-path
- 亮->NEW 是暗色放在上层从小圆扩展
- 暗->OLD 是暗色放在上层从大圆收缩
这样就能保证无论哪个方向都是暗色吞噬亮色亮色穿透暗色
========================================================================= */
/* 默认情况从暗到亮 (Dark -> Light)
此时 DOM 上的 .dark 已经被移除目标是亮色(NEW)
策略把暗色旧图(OLD)放在上层缩小它的 clip-path揭开底部的亮色新图(NEW) */
::view-transition-old(root) { ::view-transition-old(root) {
z-index: 2;
animation: tt-shrink 0.4s ease-out forwards;
}
::view-transition-new(root) {
z-index: 1; z-index: 1;
} }
/* 切换到暗色情况从亮到暗 (Light -> Dark) ::view-transition-new(root) {
此时 DOM 上已加上 .dark目标是暗色(NEW)
策略把暗色新图(NEW)放在上层放大它的 clip-path覆盖底部的亮色旧图(OLD) */
.dark::view-transition-old(root) {
z-index: 1;
animation: none;
}
.dark::view-transition-new(root) {
z-index: 2; z-index: 2;
animation: tt-expand 0.4s ease-out forwards; animation: tt-expand 0.4s ease-out forwards;
/* 显式给伪元素加上不透明背景,防止截图透明导致看不到覆盖效果 */
background: var(--color-paper-theme);
} }
/* CSS 变量由 JS 注入到 html style 中 */ /* CSS 变量由 JS 注入到 html style 中 */
@ -45,11 +26,6 @@
to { clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y)); } 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 过渡, /* View Transition 期间强制禁用所有 CSS 过渡,
确保 VT 回调中 toggle dark class 后截图捕获的是最终颜色 */ 确保 VT 回调中 toggle dark class 后截图捕获的是最终颜色 */
html.is-theme-transitioning, html.is-theme-transitioning,