xfy
76eedebf05
Chrome does not allow WAAPI clip-path animations on ::view-transition-new when animation:none !important is set via CSS. This caused dark→light transitions to have no visible animation. Replace with opacity:1 !important to neutralize the UA fade-in/out animations: the UA animations still 'run' but cannot change opacity because !important author declarations override CSS animation values. WAAPI clip-path is no longer blocked.
21 lines
858 B
CSS
21 lines
858 B
CSS
/* ========== 主题切换圆形展开(View Transitions API) ========== */
|
|
|
|
/* 不用 animation: none — Chrome 对 VT 伪元素设置 animation:none 后
|
|
会阻止 WAAPI 的 clip-path 动画生效(暗→亮方向完全看不到动画)。
|
|
改为用 opacity:1 !important 锁定两层不透明度:UA 的 fade-in/out 动画
|
|
技术上还在运行,但 !important 阻止它修改 opacity,视觉上等于无动画。 */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
opacity: 1 !important;
|
|
mix-blend-mode: normal !important;
|
|
}
|
|
|
|
/* 在 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 !important;
|
|
}
|