In this episode, we're going to look at transitions, because, well, we probably should have done that already, but it's better late than never, right? Of course I'm right. So I want to add some transitions for our search results, because whenever we type a search term and the results just kind of pop in, I want that to be, well, a little nicer, both whenever we see the results and when the results are hidden. And of course, if we are going to implement animations, then we are going to need to work with CSS transitions, which Livewire, thankfully, has built in. All we need to do is apply the wire:transition attribute to an element. However, there are some limitations.

All we need to do is apply the wireTransition attribute to an element. However, there are some limitations. Currently, wireTransition is only supported on a single element inside a Blade conditional like if. It will not work as expected when used in a list of sibling elements. And here it shows where wireTransition is applied to a list element. So we want to avoid that as much as possible. Ideally, we would just use it on a single element like a div. In fact, we have a div element that surrounds our search results. But before we do that, I want to change the size of our searchBox, because it's a little small, and it causes the search results to butt right up against the edge of the document,

But before we do that, I want to change the size of our search box, because it's a little small, and it causes the search results to butt right up against the edge of the document, and I don't want that. So inside of app.blade.php, this is the layout page for our normal pages, where we have our search component. I'm going to add a div that has a width of 1/2, and then I'm just going to drop our search component there. That's going to add a lot of length here, but more importantly, our search results have a lot more room, and we have some visual space between the right edge of the search results.

our search results have a lot more room, and we have some visual space between the right edge of the search results and then the right edge of the document. Of course, that's going to vary based upon the results, but it's at least not directly up against the edge of the page. And so now inside of the view for our search component, we just need to implement the things that we need to implement, such as we need an if directive, because according to the documentation, we need to be inside of an if directive. Now, actually, that's not correct.

we need to be inside of an if directive. Now, actually, that's not correct. We're going to look at a case here in a few moments where we won't be inside of any kind of Blade conditional, and it's still going to work. But let's focus on this for now. Now, of course, the search results were responsible for displaying themselves based upon if the searchText is empty or not. We're not going to do that anymore, because the conditional that we have here will be responsible for showing this content.

We're not going to do that anymore, because the conditional that we have here will be responsible for showing this content. So this means that we can get rid of the show prop on our SearchResults component, which means we can visit the search results view, because we no longer need to show the element with block or hidden CSS properties here. So let's get rid of that class attribute. Let's also go to the component class and just get rid of that show prop, because we don't need it anymore. If we test this in the browser, we're going to see that we still end up with the same behavior. We can type a search term, and we get the results for that term.

If we test this in the browser, we're going to see that we still end up with the same behavior. We can type a search term, and we get the results for that term. And so this is arguably a better implementation. We are no longer relying upon a reactive property to show the results. Instead, we're using just normal Blade conditionals. And in my opinion, that's a lot easier to understand and follow than the implementation that we had before. And now that we have this in place, we can just add a div element that wraps around our results, and we can apply the wire:transition attribute. I say attribute, it's more along the lines of a directive.

our results, and we can apply the wire transition attribute. I say attribute, it's more along the lines of a directive. But now, inside of the browser, whenever we perform any kind of search, we get this nice little transition, both whenever the results are displayed and whenever we clear the results. And it happens a little fast, so let's do this. Let's add some modifiers. Let's say that we want a duration of 1,000 milliseconds, or a second. Now, the documentation actually says we could use this syntax, where we specify a second.

Now, the documentation actually says we could use this syntax, where we specify a second. I haven't been able to make that work. I have only been able to work with milliseconds. But with this slowed down to a second, we will see that the animation definitely does work. But let's say I want a little more control over the animation. Maybe I only want to animate when the results are displayed and not when they are cleared. In which case, I just need to apply the in modifier.

not when they are cleared. In which case, I just need to apply the in modifier. So the entire directive is just wire:transition.in. And whenever we display the results, they animate in. When we clear the results, they are instantly gone. And we can achieve the exact opposite with the out modifier. Now the results instantly pop in, but when we clear them, they animate. Frankly, I don't like either of those options, so we're going to stick with both in and out. However, maybe I only want to use the opacity transition,

we're going to stick with both in and out. However, maybe I only want to use the opacity transition, in which case I use the opacity modifier. Now when the results are displayed or they are cleared, they fade in and out as opposed to both fading and scaling. And if we can specify just the opacity transition, then it also goes without saying we can also use just the scale transition. For that, we use the scale modifier. And we can also specify the origin of the scale. So if we want it to be top and left, we can do that.

And we can also specify the origin of the scale. So if we want it to be top and left, we can do that. Or maybe we wanted the bottom left as the origin, or maybe just the bottom. All of those are valid options, but in this case, I want both opacity and scaling. Just because I like that animation, it just kind of pops in and then pops out. Now the documentation says that we can only use the wire:transition directive inside of a Blade conditional, but I found that that's not 100% accurate. For example, inside of the editArticle view, where we have our checkboxes to determine the type of notifications, we don't use an if conditional.

where we have our checkboxes to determine the type of notifications, we don't use an if conditional. Instead, we use the x-show attribute from Alpine. But we can come in here and use wire:transition without any issues. So that whenever we change the value of our notificationOptions to either opt out or opt in, we can see that those options transition in and transition out. So you don't necessarily need to use the wire:transition directive only inside of Blade conditionals. There are some other cases where you can use them, but your mileage may vary. So it's probably best just to stick to the guidelines in the documentation.

There are some other cases where you can use them, but your mileage may vary. So it's probably best just to stick to the guidelines in the documentation. Now Livewire's transitions are built upon Alpine's transitions. So if you're familiar with Alpine's transitions, then all of this looks very familiar to you. But that also means a lot of the features, if not all of the features, in Alpine transitions are applicable for Livewire. So if you're comfortable with trying some of those features, go for it. There's no harm in trying.

There's no harm in trying.