daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

fix(css): visibility transition 0s->0.45s so allow-discrete defers collapse flip to end of ease-out

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-21 09:20:18 -04:00
parent 6e12d0161a
commit a23a22a2a3
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+7 -5
View File
@@ -383,14 +383,16 @@ h2, h3, h4, h5, h6,
reach hidden controls. transition-behavior:allow-discrete makes visibility flip discretely: it reach hidden controls. transition-behavior:allow-discrete makes visibility flip discretely: it
flips to hidden AFTER the ease-out finishes (so the animation plays fully), and flips back to flips to hidden AFTER the ease-out finishes (so the animation plays fully), and flips back to
visible BEFORE the ease-in starts (so content is immediately interactive on the way back in). visible BEFORE the ease-in starts (so content is immediately interactive on the way back in).
The visibility transition is listed as 0s so it is instant when it fires; the allow-discrete The visibility transition duration matches the height ease (0.45s) so allow-discrete has a real
behaviour determines which end of the transition that instant flip occurs on. */ interval to defer against: on collapse the flip to hidden is held until t=0.45s; on reopen it
fires at t=0 (immediately interactive). A 0s duration would fire the flip at t≈0 on collapse,
defeating the deferral and hiding content before the ease-out finishes. */
.dd-theater-collapsible { .dd-theater-collapsible {
display: grid; display: grid;
grid-template-rows: 1fr; grid-template-rows: 1fr;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: grid-template-rows 0.45s ease, opacity 0.3s ease, visibility 0s; transition: grid-template-rows 0.45s ease, opacity 0.3s ease, visibility 0.45s;
transition-behavior: allow-discrete; transition-behavior: allow-discrete;
} }
@@ -405,8 +407,8 @@ h2, h3, h4, h5, h6,
.dd-theater-collapsed { .dd-theater-collapsed {
grid-template-rows: 0fr; grid-template-rows: 0fr;
opacity: 0; opacity: 0;
/* visibility flips to hidden instantly, but allow-discrete defers it to AFTER the ease-out /* visibility flips to hidden at the END of the 0.45s ease-out (deferred by allow-discrete);
completes (at the end of the 0.45s transition), so the animation still plays in full. */ on reopen it flips back to visible at t=0 so content is immediately interactive. */
visibility: hidden; visibility: hidden;
} }