fix(css): visibility transition 0s->0.45s so allow-discrete defers collapse flip to end of ease-out
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user