From a23a22a2a3599a199001f9cf5d491f5299419f2a Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Sun, 21 Jun 2026 09:20:18 -0400 Subject: [PATCH] fix(css): visibility transition 0s->0.45s so allow-discrete defers collapse flip to end of ease-out --- DeepDrftPublic/wwwroot/styles/deepdrft-styles.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index 02894bd..f2c3b5c 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -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; }