CSS: Content Visibility & Transition Behavior

So.. what's this? Content Visibility affect performance, and transition behavior makes elements to be.. transition able..

Watching this video: https://www.youtube.com/watch?v=Vzj3jSUbMtI (It's Kevin Powel again).

content-visibility changes the element visibility, and it affects the rendering loop... So I guess it's important.

1.element{
2  block-size: 0px;
3  content-visibility: hidden;
4  transition: 
5    block-size 300ms,
6    content-visibility 300ms /* yes... */
7  ;
8}
9
10.element.open{
11  block-size: auto;
12  content-visibility: visible;
13}

But in doing that, Since this is a discreet value, it may not work.

So, we add transition-behavior: allow-discrete;. Also, we need to add interpolate-size: allow-keywords;. I prefer to set interpolate-size on the root.

1:root{
2  interpolate-size: allow-keywords;
3}
4
5.element{
6  block-size: 0px;
7  content-visibility: hidden;
8  transition-behavior: allow-discrete;
9  transition: 
10    block-size 300ms,
11    content-visibility 300ms /* yes... */
12  ;
13}
14
15.element.open{
16  block-size: auto;
17  content-visibility: visible;
18}

Checkout the MDN for Content Visibility: https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

For transition behavior: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior

For interpolate size: https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size

Check it out on codepen: https://codepen.io/juji-the-looper/pen/PwYNYVB