Introduction (0:00)
Have you ever tried to animate an element to an
unknown height with CSS alone? If so, you’ve probably found that
it’s not as easy as it seems. To animate a CSS height, you need
to animate to a specific value, one hundred percent and auto both won’t work. You can transition max-height but
this means that you probably need to use a random arbitrary value
that may not work in all cases. It’s just weird and may not even work
depending on what you’re trying to do. Well, this is something that is
available with Angular animations. In this video, I’ll show you how. Alright, let’s get to it. Now, before we get too far along,
it’s important to note that I’ve already created several videos focused
on the animation framework in Angular. They cover the basics of setting
up and using Angular animations, creating state-based and enter/leave
animations, using the keyframes, query, and stagger functions to create more complex
animation sequences, using the start/done animation events, and creating animations
that run in parallel versus in sequence. So, if any of those concepts are
unfamiliar to you, you’ll probably want to check those videos out first
so that you’re not lost in this video. And, to make them easier to find, I’ve created an Angular Animation
playlist to help, so check it out! Ok, enough of that, onto
the example for this video. Here we have a demo application
for the vans shoe brand. It has a sign-up form with multiple steps. After the user adds their email address, they switch to a new step where they need
to create a password for their new account. This is cool, but as we switch between
these two steps, it switches abruptly. It would be better to change this a
little, so that it feels more smooth. It would be better to transition as the
user switches between the steps like this. And this is exactly what we
are going to do in this video. And in order to build this exact animation,
we will need to animate between the varying, dynamic heights of the two different form steps. Ok, let’s look at the code. Here, in the template for
our sign-up form component, we can see the two panes that
we are switching between. First, we have the pane for
the email address form here. Then, we have the pane for the password form here. And, we’re using a switch to
conditionally determine the appropriate step to show based
on our “activePane” property. So, this means, as far as animations go, these items will be entering and leaving
the DOM as we switch between the steps. So, let’s switch to the code for this component. Now, let’s add the animations array. Next, let’s add a trigger
with the trigger function. Let’s name it “paneChange”. And let’s add a transition
with the transition function. For this animation we are going to animate
when the “activePane” property value changes. And, we can see that this property is a number. We want this pane change to animate
any time that number changes so let’s animate from any state to any state
with asterisk, arrow, and asterisk. Ok, now we’re going to add some animations. What we want to do is we want to start the
pane that’s entering in a hidden state while the pane that’s leaving completes
its transition to the hidden state. Then, once it’s done, we’ll animate
the item entering into the view. So, let’s add a query, and we’ll
query for item’s entering first. Within this query, let’s add the style for
the hidden pane with the style function. Let’s set the opacity to zero, and
let’s set the scale to point nine. Ok, now we’re going to add the animation for the
pane that’s leaving, so let’s add another query. This time we’ll query for items leaving. Within this, let’s add the starting style. It will have an opacity of one,
and it’ll have a scale of one too. Now let’s add the animation
with the animate function. Let’s give it a duration of point two
seconds and an easing function of ease-in. Now, let’s add another style
function to animate to. Let’s animate to an opacity of zero, and
let’s animate to a scale of point nine. Ok, next we need to animate
the pane that’s entering. So, let’s add one more query. For our enter animation, we
already added our starting style, so we just need the actual animation. So, let’s add the animate function, and we’ll add the same point two second duration,
with the ease-in timing function too. Then, we need to add the final
style with the style function. We’ll animate to an opacity of
one, and a scale of one two. Ok, so that should be it for our animation. We just need to add it in the template. So, let’s switch to the HTML. Now, since we set our animation up to
query for items entering and leaving, we can add the animation here on the
“panes” div, and we’ll need to bind it to the “activePane” property so that it
will be triggered when that property changes. Ok, let’s save and see where we’re at. Let’s click on the button to switch panes. Ok, so it’s a little better
but it’s still not very good. It still feels very abrupt. Well this is because the
height is changing because the content on the two panes is different.
So, we need to ease this height change. Well, as I mentioned earlier, this
is doable with Angular animations. We do this by animating the height
property and using a value of asterisk. This asterisk is a wildcard value
that can be used for both height and width when we’re not sure the final
length value of an animating item. Ok, so let’s add a height animation here. For this, we’ll be animating the
height of the parent element, our panes element that has the trigger. So, let’s start by adding another query here. This time we’ll query for a value of “self”
which will target the item with the trigger. And within this query, let’s add an animation. We’ll go with the same point two second duration, and ease-in timing function
that we used for the others. Now we’ll add the style function. And here, we’ll add height, and we’ll
give it a string value of asterisk. Ok, one more thing here, we don’t want the
height to change when the first pane is leaving. So let’s group the enter and self animations
with the group function so that the height will only animate when the entering item is
animating, after the leave has completed. Ok, now let’s save and see how this looks. Let’s click to advance to the next step. Ugh, it looks the same right. It’s not animating the height. Well, this is because we need
to provide a starting value. Now, sometimes you may know the starting
value, so you can provide a hard-coded value. But here, we don’t know the
starting height of the container. Sometimes it will be the height of the email step, and then others, it’ll be the
height of the password step. So what we need to do is provide the starting
height of the element to the animation. Well, this can be done using animation params. Params allow us to pass information
along to the animation so that it can use the values provided
during its animation steps. We can add params with the params
object on the transition function. In this object we can define
whatever params we need. So, in our example, let’s add params. Let’s add a “startHeight” param, and we’ll
just give it an initial value of zero. Ok, now let’s use this param for
our starting style in the animation. Let’s add another self query
here by our enter starting style. And let’s give it a starting
style of our param height. To do this, we use the param
name inside double curly braces. Also, in this case, we are going to pass the
client height of our element which will give us a number value for the number of pixels it is
tall, so we need to include the px unit here too. Ok, so that’s how we add and
use the params in the animation. Now we need to pass the value to our
animation trigger in the template. So, let’s switch over to the template. Now, rather than bind directly
to the activePane property, where going to switch this to an object
so that we can pass our params object. The first item in this object will be
the value to trigger the animation, which is our activePane property. Then, we can add a params object. Inside of this object, we
need to add our startHeight. Now what we want to do here is pass the
clientHeight of this element as the startHeight. To do this, let’s add a template
reference variable to the panes element. Ok, now we can use this element
to access its client height. And that should be it. Let’s save this and try it out. Nice, now it’s transitioning the height as we
navigate between these two panes like we want. It looks a lot nicer, at least in my opinion. Hopefully in yours too. Now remember, the asterisk not
only animates unknown heights, but it also can be used for widths. I feel like, in my experience, needing
to animate to unknown heights is more common but I’ve definitely needed to
use this technique for widths as well. So, now you have another handy tool to
help with animations in Angular apps. I hope you found this tutorial useful. Now remember, there’s a lot to the animation
framework, so I’ll go ahead and stop here for now, but I will be creating more videos on Angular
animations in the future so stay tuned! Until next time, thanks for watching.
