Transcript

In the last episode, we introduced Liquid Fire. It’s an add-on that helps us animate our app. So when we’re changing routes, this is the animation we did last time. It’ll animate in and out, or up and down, based on how the route is changing. But that’s not the only thing that Liquid Fire can do. To do that we use the liquid-outlet, but there’s also liquid-bind, liquid-if, and liquid-spacer. We’re going to be showing you two of those, liquid-if and liquid-spacer, today. We’ll start with the liquid-if helper.

So currently we don’t have any if statements within our application, so we’ll go ahead and make some. We’ll quickly make an if statement, and it’s basically checking if it’s a high level. If it is, it comments on how high the level is. Otherwise, it admonishes you to work harder. And we’ll go ahead and create this property, isHighLevel. So if it’s a level above 10... Alright, so that if statement is working. Now let’s turn it into a liquid if.

So this is fairly easy. We just say liquid-if. And we’re going to go ahead and put a class on it, because we’ll need that for our transition. We’ll also have to make sure to change the closing statement.

Now we’ll make our transition. So even though it’s a different type of transition, we’re still going to use this.transition, but we can’t use fromRoute and toRoute anymore. We have to use something else. We’re going to use hasClass, and now we’re going to use that class that we had put on before, and we can still use use and reverse.

So we’ll use fade, and we’ll go ahead and change the duration. So you can pass in arguments, one of which is duration, and here we’re making it last a little bit longer. So let’s see this in action. Alright, it’s fading, and it’s fading both ways.

Let’s see what happens when we reverse it. So to reverse, we’ll do a toDown, just so that it’s very clearly different. And we’ll go ahead and give it a duration of one second as well. So it’s fading and then when it goes back... uh-oh, it is still fading. That’s because we need to put in a toValue.

So the toValue is going to give this directionality. Before, just anything with hasClass('high-level'), it would use fade. So there wasn’t a reverse, but with the toValue it’s only if it has the high-level and the if statement is going to true.

So we can see this in action. It’s fading when we go to the higher level, and it’s sliding down when we go to a lower level. If we have the toValue as false, then that’s going to reverse. It’s going to slide here and fade here.

So that’s the liquid-if template helper. Let’s go over the liquid-spacer template helper next. So liquid-spacer is a little bit different in that it just... it changes based on the height and width of the things that are contained with it. So it doesn’t run arbitrary animations or use transition rules, so it won’t be affected by anything in here, but we can still use this well.

So here notice that we have an image, and sometimes this image will be tall, sometimes it will be short. So we can put in a liquid-spacer around it, and watch what happens.

So first of all, there’s a little bit of an error when you’re loading the page with it. So I don’t know how to overcome that. But if you get it to load right, it’s really cool. So notice how it slid down. Without that it would’ve [04:41] just snapped up, without that slide.

So there’s not a whole lot of options that you can use with this, but you can change the growDuration either as a total time or the number of pixels per second. And you can put it here. So we can make growDuration equal to... we’ll make it really slow. See. That’s much slower than it was before.

Of course now that I’ve brought up the options that are available on liquid-spacer, you might be wondering, are there options available on liquid-if, and the answer is yes. These are actually options that are available not specifically on liquid-if, but more generally on most of the template helpers.

So we saw class before, but you can also directly assign which animation to use. And you can assign the four that we saw on liquid-spacer. Now this direct animation, it skips the transition map, and this is useful if you want to save a little space for a one-off animation, or if you want to overwrite something that’s already on the transition map but just in this one specific instance.

We can see that with our if statement. So we have our transition that fades and does toDown for the if statement depending on which direction it’s going. But we can overwrite all of that by just saying use=''toLeft''. And then when we change it, it’ll go to the left. Notice it goes to the left for both. So you can’t have all the flexibility that you would have with a transition. This is just a quick and dirty action.

So today we went over the liquid-if and the liquid-spacer template helpers. In the next episode, we’re going to go over the liquid-bind helper. This one’s a little bit tricky, but with the right know-how it can be very cool to use. I’ll see you then.