Building Modals in Livewire
This episode is for members only

Sign up to access "Building Modals in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
11. Bonus transitions

Episodes

0%
Your progress
  • Total: 1h 1m
  • Played: 0m
  • Remaining: 1h 1m
Join or sign in to track your progress

Transcript

00:00
OK, let's go ahead and add some nice transitions to our modal wrapper.
00:03
So when it opens, it just looks a bit nicer rather than this jarring, just appearing on the page. OK, there's a couple of approaches that we can take to this. The first thing that we're going to transition is the background. So as well as the actual modal window itself, we want the background to transition in.
00:23
Now, we already have a transition opacity property set on here. But what we're going to do first of all is add an X show. Now, when we start to add transitions with Alpine in here, this won't work unless we're toggling this with X show. So if you add in a transition anywhere and you don't have X show applied to that element, it's not going to know when it's visible.
00:46
And it's then not going to know when to start to transition. So I'm going to go ahead and add X visible to this and or X show visible. That doesn't make any difference because we already know that it's just going to show anywhere when it's visible. But now we can start to add in a transition.
01:01
So this is going to be a really simple one. We're going to go ahead and say X transition and we want to transition on the opacity. Now, with this, we can add in some modifiers. So, for example, we could set the duration in here to 300 milliseconds.
01:16
And to be honest, that's pretty much it. That's just going to go ahead and transition this background, this grayed out opacity background over a period of 300 seconds. So if we head over now and we open this up, you can see that, sure enough, the background is nicely transitioning in. Now, it doesn't look great at the moment because, of course, we're not transitioning our main modal window.
01:40
It's just going ahead and disappearing once this transition is finished, which doesn't look great. So we're going to head down and do the same thing to the modal window here. So once again, we're going to go ahead and say X show visible. Again, that's not going to have any effect on how this works, but now we can start to add some transitions to here.
02:02
So we're going to look at some more advanced and thorough transitions here so you can really control how this works. Now, to do this, we have several things that we can add. Let's go ahead and use X transition and enter. And I'm going to go ahead and add these all now, explain what they are, and then we can go ahead and fill them in.
02:22
So we have X transition enter. These are the CSS properties that are added for the enter transition. So, for example, we could add the ease out type. We could add the duration in there.
02:34
The second one is enter start. This is how it starts. So obviously, we're going to want this modal to be hidden, and then we're going to want it to be shown. So we might add an opacity here.
02:45
We might add a scale into here so it's a little bit smaller and then sort of pops out into the page. Now, relating to that, we have enter end, which is how we want this to finish up on the page. So this is going to be 100% scale and 100% opacity as an example. Now, we pretty much have the same set but for leaving.
03:06
So we have the properties that we want to add when this is leaving. We want what this looks like at the start of it leaving, and then what this looks like at the end of it leaving. So let's go through all of these. This can be a little bit overwhelming, but once you get the hang of it, it's very easy.
03:24
So the enter properties, the CSS properties that we want on here is transition. We want this to be ease out, and these are all CSS properties directly from Tailwind. And we're going to say duration 300. So it's pretty much like if you were to add these as classes, they just happen when this visible kicks in.
03:45
Okay, so when this starts, what do we want this to look like? Well, we don't want it to be visible. So we're going to set an opacity to zero, and we're going to set a scale of, say, 90 just to make this a little bit smaller. Now, if we get rid of all of these, let's just temporarily cut them out and just see what this looks like.
04:04
You can see that it does actually pop in. So you can see if we just bump this scale down to, say, 50, you can really see it pop in like that. So these are what control the duration. This controls the start value, and of course, this controls the end value, which you don't technically need because we already have the classes applied up here.
04:26
But we're going to set the opacity to 100 and the scale to 100 as well because we want this to be fully visible and scale to 100% of how it sits on the page. So leave is exactly the same, and we can use the same transitions here for leave. But what do we want this to start out with? Well, we want it to start at 100% opacity and 100% scale, and we want this to go down to zero opacity, and we want this to go down to 90 scale as it leaves.
04:54
So it will get smaller, and it will fade out. So basically, ignoring enter and leave, we start with it completely invisible and at a 90% scale, and we scale that up, and we make this completely visible. And then just before it leaves, we know that we want to start how it ended, and then we want to end how it started. So we basically do the reverse of what we had.
05:17
Let's go ahead and check this out, and there we go. So it nicely goes in and then out again when we leave. So you can go ahead and play around with these to add any classes that you want. For example, when you leave this, you could make it bigger before you make it smaller to sort of have a jump out effect.
05:36
In this case, you would want to go ahead and scale this up to, say, 120 before it leaves. So if I open this up and then close it, let's actually bump that up to 150 because I don't think 120 is valid. Now, this isn't going to look great, but it just gives you an idea of the order of these. If I open this up and just before I close it, you can see it jumps out to be bigger and then goes back down again.
05:57
You wouldn't do that, but you can play around with these to get the kind of style that you're after. OK, there we go. We've added a really simple sort of inline transition here. And then for the main container, we've added each of the transition steps to control how this looks as we open and close the modal.

Episode summary

In this episode, we're taking our modal up a notch by adding some smooth transitions. You know how the modal just kind of pops onto the screen and it's a bit jarring? We're going to fix that so it appears and disappears in a much friendlier way.

We start by adding a transition to the background overlay, making it fade in nicely. To do this, we rely on Alpine's x-show directive—otherwise, transitions won’t work as intended. Once that's in place, we throw in a simple opacity transition and tweak the duration for a more polished feel.

But we’re not done! The real magic happens with the modal window itself. We go over advanced transition properties using Alpine and Tailwind, fine-tuning every step: what happens when the modal starts entering, finishes entering, starts leaving, and finishes leaving. We mess with things like opacity and scale, so instead of just fading in, the modal can pop into view and shrink out smoothly when closing.

Along the way, I show you how easy it is to play with these values—like making the modal zoom out a bit before it goes away, just for fun. The main point? With a bit of tweaking, you can make the modal animation your own and really level up the user experience.

Episode discussion

No comments, yet. Be the first!