Transition to and from display: none

[00:00:00]Hello, my friend and friend. If you've ever needed to transition something in and out in different ways depending what it is, but you're going from a display of none to a display of something else, doesn't actually work in CSS, except now it does. It just takes one property and one new at rule, and we can pull something like this off or do much fancier things if you'd like as well.

[00:00:18]So, if you'd like to know how to do this, well, then let's dive right into it. All right, so how do we do this?

[00:00:22]Well, you can see here I'm first of all opening and closing things with this button that's right here, which I'm using invoker commands for with a dialogue. So, if I scroll all the way down to the bottom, I have a dialogue set up here that has an ID on it of my newsletter modal, and then all the way back up here the invoker command for my [snorts] newsletter modal is doing a show modal. Invoker commands are in all browsers now, but it's relatively new. So, if you want to be a little bit safer, you can do the same thing using a little bit of JavaScript, and that works fantastically well without any issues.

[00:00:55]And of course, you don't have to be doing this with a dialogue. This would work with anything where you're going from a display of none to a display of grid. And what we want to do is, you know, do this transition, and I can't do it because normally you can't do a transition on a discrete animation, which is what display is. If you don't know what a discrete animation is, I'll put a link to the MDM to explain that.

[00:01:14]But the fix is doing, or the first fix, cuz we need two fixes, they're both one-liners basically, transition behavior of allow discrete. And this means you can take something that is a discrete animation, and we're allowed to transition it. Does not work when we open it, but look at that, it fades away when I'm closing it, which is amazing. A little bit frustrating that's only in one direction, and that's just because when we go from a display of none to the display of grid, it's instantly getting to this state, and so it just lives here. It didn't know what existed before. But when I'm closing it, it's going, "Oh, we're doing our transition behavior of allow discrete, so I'm going to let my display property stay as the grid for 2 seconds while the other animations or transitions are running.

[00:01:58]So, or I'm saying animations, but transitions in this case are going to run, so the opacity is going to work and we can do other stuff which we'll see in a second as well.

[00:02:07]So, how do we get this to actually work the other way around? We're on our open state, at the end of the open state, and this is really important that it comes after and not before, which is annoying, the order of things.

[00:02:18]We do an at starting style, and this is a new at rule that we have for exactly what we want to do here where I want to start with an opacity of zero.

[00:02:26]And now, it will transition in and it will transition back out.

[00:02:31]Fantastic. Right?

[00:02:33]So, the order here is important. We're doing the closed state, then we're doing the open state, and then we're doing the from closed state to open state. And it's a little bit weird, maybe leave some comments, but it doesn't need to be in that specific order for it to work properly. Uh at least this part does.

[00:02:50]The from open to close maybe could be the other way around, but um again, this probably makes the most sense. So, we're going this is my closed state, this is my open state, and then the transition phase here before the animation starts.

[00:03:02]If you put this earlier, it will not work because of the way the cascade works and the last rule wins.

[00:03:08]Just like with a media query or anything else.

[00:03:10]So, the cool thing with starting style, cuz if you're just doing this, I mean, it works, it's fine. It's one literally, well, a one-liner. We can let's make it a one-liner, so I'm not lying. There we go, it's now a one-liner.

[00:03:22]But, the nice thing with starting style is we can do a little bit more with it.

[00:03:26]So, let's also here, I'm going to add two lines actually. I'm going to add an overlay. I don't necessarily need it in this case, but with modals or dialogue, if you're doing popovers too, this could be useful because this is dealing with the top layer and can be useful. And we also have our backdrop, it might be associated with that, but I might be wrong on that one. But, I also want to add a translate here as well. So, we're going to do our Our our display, and overlay are just getting thrown on here to make sure everything works. Uh and then the translate is getting added at the end. So, what I can do is let's come here and so we're going to do a translate of 0 50 pixels, which is going to move it down a little bit. Then, we're going to have a translate of a 0 0. And on the starting style, let's come in with a translate of a 0 -50 pixels.

[00:04:13]And this is one of the things I like about starting style is it means we can have an entry animation and an exit animation, and they can be different from one another. The last thing, just really quickly, you might have noticed my backdrop is not actually transitioning or animating, which is a little bit weird. Uh what I would do if you have a backdrop or something like this is just throw an opacity of 0 on it for the regular state. Then, when our modal is opened, this could have an end backdrop of opacity of one and then and backdrop opacity of zero. And you guessed it, we just come here and do a tran- transition opacity 2 seconds. And in doing that, when it opens, you can see because the opacity's changing, the filter ends up actually sort of transitioning back and forth uh at the same time as well. So, different type This is like the easiest way is just playing with the opacity on backdrops or other things uh like that that you have at your disposal. And yeah, just like that, we're now transitioning to and from a display of none. It's fantastically easy to do. And with that, I'm going to say a very big thank you to my enabler of awesome, Johnny, as well as all my other patrons and channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.