Member-only story

We Can Finally Transition Display: None!

Kenton de Jong
2 min readJan 18, 2024

--

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!

--

--

Kenton de Jong
Kenton de Jong

Written by Kenton de Jong

I am a web developer turned travel blogger that is forced to code to eat.

Responses (4)

What are your thoughts?