Let's take a look at how we can take care of enter and leave transitions. Thanks to relatively recent additions to CSS. I've created a new demo for that one and I'll walk you through the code. So we have this make it pop button and it's going to open a popover when I click on it. Nice. And I can click outside to dismiss the popover. So here's the markup for it. And by the way, there is no JavaScript at all here.

So here's the markup for it. And by the way, there is no JavaScript at all here. It's using the HTML popover attribute. And if I remove this here, you will see that the popover is no longer a popover. It's just a bit of text and if I click on the button, nothing happens. So by adding the popover attribute here and then linking the ID of the popover with the popover target on the button,

and then linking the ID of the popover with the popover target on the button, we have a fully functional popover element and the browser is even going to add some stars to place it in the center of the page, which is pretty cool. I won't go into any more details than that about popover elements. This is not what this lesson is for, but just know I have a RAB bit on HTML popovers if you're curious to learn more about that.

but just know I have a RAB bit on HTML popovers if you're curious to learn more about that. So here's my button stars. Uh, maybe a quick sidetrack because it's pretty cool. You can see I have this button color CSS variable that I use for the color. And then for the hover state, I use the color mix function and I mix 80% of that blue with 20% of black. So think about it, if you have 80% of blue paint like this button

So think about it, if you have 80% of blue paint like this button and you add 20% of black, it should make it a little bit darker. And so on a hover we have this 20% black mixed with the blue. Uh, color mix is pretty cool. Alright, so those are the styles for the button. And now let's take a look at the popover. So we have some basic styles like padding with uh,

And now let's take a look at the popover. So we have some basic styles like padding with uh, border radius and box shadow on the popover element itself. And then we also style the backdrop, which is the element that goes between the popover and the rest of the page. And here it's a half black, half transparent, uh, overlay. So now we'll want to add some transitions when the popover opens and closes. So what I'm thinking is a little scale up and opacity, zero to opacity one when it opens,

So what I'm thinking is a little scale up and opacity, zero to opacity one when it opens, and then the same in reverse when it goes away. So what I'm saying is I would like the popover to have an opacity of one and a transform scale of one. But then when it's not open, it should have an opacity of zero and a scale of, eh, let's go 0.9. And now to enable the transition on both the opacity and transform, I will go transition properly, opacity

And now to enable the transition on both the opacity and transform, I will go transition properly, opacity and transform, and the duration of 300 milliseconds. Let's go 500 just so we see it properly. All right, and let's take a look at what we've got at this point. So I'm going to click the toggle and no transition. Nope, definitely nothing happening either when we open or close the popover. It's abrupt. There is no transition to be seen anyway,

or close the popover. It's abrupt. There is no transition to be seen anyway, and that's kind of confusing and frustrating. And for the longest of time it was flat out not possible to do anything about it. But this has to do with the transition behavior, which is the last property we need to talk about. It's gonna be a bit weird, but come along for the right. Basically most CSS properties can be animated, but some have a different behavior,

Basically most CSS properties can be animated, but some have a different behavior, which is called discrete. And essentially when that happens, these cannot have a smooth transition with interpolation steps. And typically they jump from the start to finish transition somewhere halfway through the transition. You can see here discrete animated properties generally flip

through the transition. You can see here discrete animated properties generally flip between the two values 50% throughout. However, there is an exception when you try to animate from display none or content visibility hidden. In that case, if you do a display none from none to block, uh, it's going to flip to block at 0%. So right at the start of the animation and then stayed in the finished state of the animation for the whole transition duration.

and then stayed in the finished state of the animation for the whole transition duration. That's precisely what's happening In our case, uh, you might have not noticed, but actually when the popover is not showing it has display none on it. And so when it opens, it goes from display none to display block and it ruins the transition for everybody. It's going to take the opacity and transform transitions and chuck them in the bin

It's going to take the opacity and transform transitions and chuck them in the bin because it's going to be like, no, I am a discreet transition property. And I'm going to flip to the final form for everybody from frame one 0%. What a shame. That's a shame indeed. But luckily if I scroll back up, we have an opportunity to fix that with the transition behavior, uh, property that can be set to allow discreet or normal.

to fix that with the transition behavior, uh, property that can be set to allow discreet or normal. And if you set it to allow discreet, it'll still start the transition and basically allow us to honor and maintain the other transition properties we're trying to animate. All right, so check this out. I'm going to tell the transition property that we also want to animate the display property. With that alone, nothing is going to change.

to animate the display property. With that alone, nothing is going to change. We should still have an abrupt in and out and yet we do. But now I'm going to add the transition behavior to not smooth, but allow discrete. And that is going to tell, hey, I know display is a discreet animation, but you are going to allow it. And so we can try to make the best out of these animations. And this time, let's take a look.

And so we can try to make the best out of these animations. And this time, let's take a look. It's still not going to work on open, but watch what happens when I close it. Aha, did you see that? Let's take a look one more time. Nice. Good start. So looks like the allow discreet transition behavior property gets us halfway there. It only works for the exit, uh, styles, but there's a way to handle the enter styles as well.

It only works for the exit, uh, styles, but there's a way to handle the enter styles as well. And for this we can use the at starting styles CSS at rule, check it out in our code. Currently, this is actually not the starting styles, but this is the exit styles. So after the open is closed, we are going to go back to this. So this is the open state, this is what it falls back to. Go away, display on after we close the model.

So this is the open state, this is what it falls back to. Go away, display on after we close the model. But if we want actual starting styles before the popover opens, we can define a CSS at rule here called at starting style. And these stars are going to be applied to the elements just before it's renders or mounts into the page. So here we can go opacity zero and transform scale 0.9.

So here we can go opacity zero and transform scale 0.9. So at the moment we've basically recreated the exit stars, but as you'll see, we can also make them different, which is very cool. So let's take a look at the popover one more time now that we have the allow this transition behavior and these starting styles. All right, let's go click on it. Aha, now it's easing in and still easing out.

All right, let's go click on it. Aha, now it's easing in and still easing out. One more time is in is out. Alright, and let's say you wanted to have different styles on enter and on leave. Well, we can do that easily for the starting styles we will also add a translate y and let's go two rems so that the element slides up a little bit when it enters. And so now on enter the element should slide up a

that the element slides up a little bit when it enters. And so now on enter the element should slide up a bit as well as fade. Uh, I'm not sure it looks too great with the slide and the fade. Uh, the scale I means. So we will remove the scale. So now we are going to slide up on enter and scale down on leave. Let's take a final look. So slide up and scale out, slide up, scale out.

Let's take a final look. So slide up and scale out, slide up, scale out. Nice. All right. And that concludes our CSS transition segment. So the clear limitation of CSS transitions is that you can only go from point A to point B in one motion basically. So you cannot have intermediary steps. You can't have a square rotate one way and then rotate the other and then move up, go

You can't have a square rotate one way and then rotate the other and then move up, go to the left and so on. And this is where you need to reach out for the next tool in your bag. CSS Key frame animations, we'll talk about this next.