Next we'll add a button below to toggle and transition the box. Here's how. We'll begin by creating our component scope, and then how about right below it, I'll add a button that says Toggle, and when you click on it, show will equal the opposite of what it currently is, and we will register that. Actually, let's show it by default. Now the only remaining step is to bind the visibility of this green box to that state. So again, all of this should be a recap at this point. If I come back, give it a refresh, we see it, we don't see it. All right, very simple.

And then when we bring it back, it'll go from a scale of 0 to 100%. And again, over 5 seconds. All right, so this is really useful, but you'll likely find a variety of situations where you need more control. Maybe certain styles or classes should be applied when you're entering, but they should be tweaked when you're leaving. There's no shortage of scenarios like that. So here's what we'll do. I'm going to bring this back to a simple x-show, and then I'm going to add a new one here.

So if I come back, let's hide it, and if I click it again over the course of a second, the box will be revealed. Now of course, when we hide it, we don't have any transitions there. So it's immediate. However, when we enter the transition, we adjust the opacity over a second. So if you're not familiar with any of these classes, let me show you something. We could add them here. If we add a CSS class of transition with Tailwind, you'll see it's adding this right here. Here's a list of the properties that should be transitioned. Next, if we add another one like duration-300, and you can refer to the Tailwind documentation.

Here's a list of the properties that should be transitioned. Next, if we add another one like duration-300, and you can refer to the Tailwind documentation for all of them. But all that's doing is applying the transition duration. So now, if you think about it, we're just saying, when you start a transition, I want to transition the opacity over the course of one second. And it'll start with an opacity of 0. Let's see, where is that? Right there. And it will conclude with an opacity of 100, or 1.