anti/DECNET
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(decnet_web/Layout): kill residual theme-swap open flash

Browse Source 
Even with fill: 'both', the new pseudo paints once at its default
style (no clip-path = full size) before the JS animation
registers — the brief open flash that survived the previous fix.

Pre-publish click coords as --reveal-x / --reveal-y on <html>
before calling startViewTransition. The static CSS rule on
::view-transition-new(root) now sets clip-path: circle(0px at
var(--reveal-x) var(--reveal-y)) as the pseudo's default, so
the very first paint is already fully clipped. The animation
then grows the circle outward from there.
This commit is contained in:
anti
2026-05-09 04:17:50 -04:00
parent ccff1467b1
commit 5a34b1846c
2 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
decnet_web/src/index.css
View File

@@ -359,6 +359,13 @@ input:focus {
}
::view-transition-new(root) {
z-index: 1;
/* Default clip-path: a zero-radius circle at the click point
* (--reveal-x / --reveal-y are written to <html> by
* useThemeToggle.ts BEFORE startViewTransition runs). The
* pseudo therefore renders fully clipped on its very first
* frame — no opening flash possible. The web-animation then
* grows the circle outward; fill: 'both' pins the end. */
clip-path: circle(0px at var(--reveal-x, 50%) var(--reveal-y, 50%));
}
/* ── Scrollbar ─────────────────────────────────── */

9
decnet_web/src/lib/useThemeToggle.ts
View File

@@ -64,6 +64,15 @@ function animateSwap(next: Theme, x: number, y: number): void {
return;
}
/* Publish click coords as CSS custom properties BEFORE the
* transition starts — index.css uses these in the
* ::view-transition-new(root) default rule so the new pseudo
* is already clipped to circle(0) at this point on its first
* paint. Without this, the new layer renders at default styles
* (full size) for one frame before the animation registers. */
document.documentElement.style.setProperty('--reveal-x', `${x}px`);
document.documentElement.style.setProperty('--reveal-y', `${y}px`);
const transition = docVT.startViewTransition(apply)!;
transition.ready.then(() => {
const endRadius = Math.hypot(