Member-only story
We Can Finally Transition Display: None!
![](https://miro.medium.com/v2/resize:fit:700/1*fbeg96cPjBU1_cjgLo9uSg.jpeg)
Where was the fanfare on this!? 🤯🤯
I was reading w3cplus’ very long, but very interesting article about CSS in 2023/2024 and came across transition-behavior
. CanIUse has this at only 65% but the holdouts are the regular culprits, Safari and FireFox. However, this is pretty easy to build a fallback for so I am fine with using it for progressive enhancement.
Consider the following CSS:
.box {
width: 20%;
height: auto;
aspect-ratio: 1/1;
display: block;
position: relative;
transition: all 0.25s;
transition-behavior: allow-discrete;
opacity: 1;
scale: 1;
}
.box.closed {
display: none;
opacity: 0;
scale: 0;
width: 0;
}
Once the .box
get the .closed
class, it would normally just flicker away. If you try to use transition with display: none
, it instantly changes and all other transitions aren’t seen by the user.
But by adding transition-behavior: allow-discrete;
, the display: none
is delayed until the end of the transition of the opacity
, scale
and width
.
See it for yourself:
This also works for visibility: hidden
too, but I don’t use that nearly as much.
I am so thrilled that we no longer have to use JavaScript transition event listeners to hide elements. This is a huge game changer… if only for the browser support.
Shout-out to w3cplus and their awesome article about it. Be sure to check it out!