xfy
22d05a98b3
- biome.json: $schema 2.5.1 → 2.5.3，对齐已安装的 CLI 版本（消除 info） - code-block-view.ts:157: `a && a.b()` → `a?.b()`（等价 optional chain） - style.css:56: 保留刻意的 `transform: none !important`（删除会重新引入 animation-fill-mode: both 导致的堆叠上下文 bug），仅加 scoped biome-ignore 抑制 noImportantStyles，不做全局禁用
59 lines
2.3 KiB
CSS
59 lines
2.3 KiB
CSS
/* ========== 主题切换圆形展开(View Transitions API) ========== */
|
|
|
|
/* 取消所有 UA 默认的动画和颜色混合 */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
mix-blend-mode: normal;
|
|
display: block;
|
|
}
|
|
|
|
/* 无论什么方向,始终让 new (新状态) 在上方,并从小圆扩展覆盖 old */
|
|
::view-transition-old(root) {
|
|
z-index: 1;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
z-index: 2;
|
|
animation: tt-expand 0.4s ease-out forwards;
|
|
/* 显式给伪元素加上不透明背景,防止截图透明导致看不到覆盖效果 */
|
|
background: var(--color-paper-theme);
|
|
}
|
|
|
|
/* CSS 变量由 JS 注入到 html style 中 */
|
|
@keyframes tt-expand {
|
|
from {
|
|
clip-path: circle(0px at var(--tt-x) var(--tt-y));
|
|
}
|
|
to {
|
|
clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y));
|
|
}
|
|
}
|
|
|
|
/* 在 View Transition 期间强制禁用所有 CSS 过渡,
|
|
确保 VT 回调中 toggle dark class 后截图捕获的是最终颜色。 */
|
|
html.is-theme-transitioning,
|
|
html.is-theme-transitioning *,
|
|
html.is-theme-transitioning *::before,
|
|
html.is-theme-transitioning *::after {
|
|
transition: none;
|
|
}
|
|
|
|
/* VT 期间清除动画残留的 transform,避免创建堆叠上下文(stack context)
|
|
导致 ::view-transition 伪元素无法覆盖可运行代码块区域。
|
|
|
|
根因:animate-page-enter 动画用 transform: translateY/scale 做入场,
|
|
动画结束后因 animation-fill-mode: both 保留计算值(transform: none 被浏览器
|
|
序列化为 matrix(1,0,0,1,0,0),仍是"非 none"的 transform)。非 none transform
|
|
会创建堆叠上下文,使 ::view-transition-old/new(root) 顶层伪元素无法正确覆盖
|
|
其内部的 CodeMirror/xterm——圆形展开扫过时代码块直接瞬切而非被圆形揭示。
|
|
|
|
is-theme-transitioning 在 startViewTransition 之前添加(OLD/NEW 快照均含此 class),
|
|
故 OLD 与 NEW 快照里 transform 都被清为 none,两者一致,不影响动画效果。 */
|
|
html.is-theme-transitioning .animate-page-enter {
|
|
/* !important 必需:animation-fill-mode: both 保留的关键帧值优先级高于普通
|
|
规则,只有 !important 能覆盖,确保 VT 期间 transform 被清为 none。 */
|
|
/* biome-ignore lint/complexity/noImportantStyles: animation-fill-mode: both 保留非 none transform 创建堆叠上下文,仅 !important 可覆盖(详见上方注释) */
|
|
transform: none !important;
|
|
}
|