it's interruptible and reversible! u can try the demo here too:
developer.mozilla.org/en-US/…
one important detail is that for entry animations, you'll also want to combine this w/ @starting-style to define the initial state of elements that were previously display: none
more on this:
css-tricks.com/almanac/prope…
so, i was thinking about where transition-behavior: allow-discrete could actually be useful
and imo, one really good use-case is when you're toggling the visibility of elements and want to add a little animation (like a subtle fade).
eg, when expanding/collapsing a sidebar!
ofc, if you use base-ui / radix / any popular component lib, or any popular animation lib (which is like 99% of the cases nowadays), you don't have to worry about this at all, since they already handle exit animations
but i'll share another demo soon where i think this can come super handy!
more to read:
css-tricks.com/almanac/prope…
another underrated css prop i discovered only now is transition-behavior: allow-discrete!
it allows transitions between discrete props, like display or visibility, which can be super useful for entry/exit anims
on the left, without allow-discrete, switching from display block to none happens instantly
on the right, with allow-discrete, the element stays visible during the opacity transition, and swaps to none only when the transition finishes
there are so many things that is obvious to you or a lot fo people but are completely new to someone else!
i think a lot of people hesitate to share what they know because they assume it's common knowledge, when it's really not sometimes
imo we should all share our stuff more freely even if it feels obvious haha