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

This commit is contained in:
daniel-c-harvey
2026-06-21 09:20:18 -04:00
parent 6e12d0161a
commit a23a22a2a3
@@ -383,14 +383,16 @@ h2, h3, h4, h5, h6,
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
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
behaviour determines which end of the transition that instant flip occurs on. */
The visibility transition duration matches the height ease (0.45s) so allow-discrete has a real
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 {
display: grid;
grid-template-rows: 1fr;
opacity: 1;
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;
}
@@ -405,8 +407,8 @@ h2, h3, h4, h5, h6,
.dd-theater-collapsed {
grid-template-rows: 0fr;
opacity: 0;
/* visibility flips to hidden instantly, but allow-discrete defers it to AFTER the ease-out
completes (at the end of the 0.45s transition), so the animation still plays in full. */
/* visibility flips to hidden at the END of the 0.45s ease-out (deferred by allow-discrete);
on reopen it flips back to visible at t=0 so content is immediately interactive. */
visibility: hidden;
}