Transitioning to and from display none is easy now!

We used to have to come up with workarounds for animating and transitioning to and from display: none, but it's really easy to do now!

If you're after a more in-depth video, one is in the works!

[aram]

With all those great changes I feel like there is some sort of a mess creeping into css syntax as well.

[kablamopow]

Now this is what we need. The less JS we use for nuances like animation the better. Let JS handle data, and CSS the display.

[smddev]

This video was both informative and therapeutic, as per usual.

[EricFressange]

Hi Kevin, thanks for this new solution demo.
A nice to have in all your videos when explaining a new property would be to add a link to caniuse in your descriptions.
So we would quickly see real-time compatibility the moment we watch the video.
For example, allow-discrete is 70% supported at the time of writing this comment.

[daniyalasif]

That's an amazing update! This will make adding animations a breeze

[rayyanabdulwajid]

CSS has become much better and easier compared to 10 years ago. Good time to learn web developement. Anyway, please share the full code

[geforcesong]

looking forward to more supporting on all browsers

[ahmaadaymaan]

impressive !!
I think I will watch your css course

[riacharda]

I wish I saw this before my coding test, I use dialog all the time! This is awesome!

[daveskye]

Could you do 'full' version of this video as its a bit too rushed as a short?

[IOSARBX]

Kevin Powell, Subscribed because your videos are always awesome!

[acavbeats]

I had to comma-separate the values of transition-property and then it worked great

[re-member]

Please, always highlight the browser support.
At 70.56% it's currently useless.

[rainydays]

I wanted this video 1 year ago when i was using js to manipulate the dom. Now that im using modern frameworks, the entire element is not there and im hardly using display: none;

[shaunazar]

@kevinpowell have you seen the use of transitions and I would think keyframes to smooth the transitions of items when you increase or reduce the viewport width of a flexbox container? I see it all the time when you you have a gallery widget (pictures will animate to fewer columns), but there doesn't seem to be standard for adding a transition to reflowing flexbox items. I think it would be a nice touch and just curious how you would approach it.

[re-member]

Edit: It wasn't the lacking browser support that was causing the layout shift.
My layout broke, because I used this on a tabs element, where display: none is used to switch content within the same frame. The transition of display lead to layout shifts, because this makes all tabs visible and transitioning for a brief moment. There's multible ways to solve this, but its necessary to be aware of whats going on at first.

[mangadi]

can you make a video about this new feature and explain more about the @starting-style? ;)

Yet another thing shaking up the render tree rules yeah! 👐

[LouiseJosephine]

I just don't know how to keep up to date with all the latest CSS "best way of doing X" and I also don't know how to make sure it's all supported and doesn't create accessibility problems (which gets ignored a lot).

[abdvlkadr]

I need to refresh my css skills. I’m stuck in flex box 😭😪