henri/trictrac
1
1
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat(client_web): checkers slide animation

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-09 20:17:21 +02:00
parent e7c0a390e3
commit 4a07c41f7c
5 changed files with 151 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

19
client_web/assets/style.css
View file

@ -999,6 +999,25 @@ body {
letter-spacing: 0.14em;
}
/* ── §4a — Checker slide animation ─────────────────────────────────── */
@keyframes checker-slide-in {
from { transform: translate(var(--slide-dx, 0px), var(--slide-dy, 0px)); }
to { transform: none; }
}
/* Only the arriving (outermost) checker animates; --slide-dx/dy are set
as inline styles on that element at render time, so no flash occurs. */
.checker.arriving {
animation: checker-slide-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Lift the field that owns an arriving checker above its siblings so the
checker doesn't slide under adjacent fields (isolation:isolate traps
z-index within each field's stacking context). */
.field:has(.checker.arriving) {
isolation: auto;
z-index: 10;
position: relative;
}
/* ── Checker lift on selected field (§4b) ───────────────────────────── */
.field.selected .checker-stack {
transform: translateY(-5px);