With Angular we have a powerful
animation framework that we can leverage to do all sorts of crazy things. Sometimes, when using these animation features, we need to do things when the animation
starts, or when it ends, or both. Well, good news for us, we
have this ability in Angular. We have the animation start and done
events that fire at those times, and this allow us to program
against them as needed. In this video we’re going to learn
how they work and how to use them. Alright, let’s g
et to it! Before we get too far along,
it’s important to note here that I’ve already created several videos
focused on the animation framework. They cover the basics of setting
up and using Angular animations, creating state-based and enter/leave
animations, and using the keyframes, query, and stagger functions to create
more complex animation sequences. 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, I’ve create an Angular Animation playlist to
help make them easier to find, so check it out! Ok, enough of that, onto
the example for this video. Here we have this demo application for the
Vans shoe brand, and it has a sign-up form. Right now, when we click the button
while the form is invalid, we do nothing. This isn’t very helpful for the user. It would be better if it
did something more obvious. We could change its color to
red and make it wobble instead. And, this is exact
ly what we’re
going to do in this video. Ok, let’s look at some code. All of the work we’re going to do for this demo
will be done within this sign-up-form component. Let’s start by adding the wobble animation. We’ll add the animations array
to the component metadata. Within this array, we’ll add a trigger with
the trigger method, let’s call it “wobble”. Now, we’re going to use a boolean
property to trigger this animation so let’s add one called “wobbleField”,
and let’s initialize it to fa
lse. Now, within the trigger, let’s add a
transition with the transition function. We’ll want to run this animation only
when changing the value of the wobbleField property from false to true, so we add
that expression with false, arrow, true. Within this transition let’s add an
animation using the animate function. Let’s add an animation duration
of point seven five seconds. This is how long the field will wobble
back and forth after clicking the button. Ok, to create the animation we’re
going to use several keyframes, so let’s add the keyframes function. Within this function, let’s add the style
we’ll start with using the style function. We’ll first move the field to
the left so within this function, we’ll add a transform, and we’ll give
it a value of negative five percent. And we’ll want it to be translated
this distance ten percent of the way through the animation, so
let’s add an offset of point one. Alright, now we can duplicate this style. For this next keyframe, we
want
to push the field to the right, so let’s change it from negative five
percent to positive five percent. And we’ll want this to occur thirty percent of the way through the animation so let’s
change the offset to point three. Ok, let’s duplicate this again, and
switch to negative five percent again. Then let’s set the offset to point five. Now let’s add another style and switch to a positive five percent, with
an offset of point seven. Ok, we’re getting close. Let’s add another style and
switch to
negative five at an offset of point nine. Alright and for the last keyframe, we’ll translate
back to the original position at an offset of one. Ok, so that’s the animation, now we need to
bind it to our field container in the template. So here on our label element
we’ll add the @wobble trigger. Now, we’ll bind this trigger
to the wobbleFIeld property, and we’ll only want to trigger the
animation when the form is invalid. Ok, the last thing we need to do is
toggle the wobble fie
ld property. Here on the submit button, we can
see that when this button is clicked, if the form is valid, we will emit that the
form is submitted, otherwise nothing happens. Let’s replace null with an expression where we
set the wobbleField property to true instead. Now it will either submit the
form or trigger our animation. Ok, let’s save and see how it looks. Cool, so it wobbles now like we want. But what if we try it again? Well, it doesn’t run a second time. And this is because we set
our property
to true when the button is clicked and from there on out it remains
true, nothing switches it back. Well, this is a good case for us
to use the animation done event. When we use animations in Angular, we can access the done event by
using event binding with parentheses. Then we add the trigger followed
by a dot, then the word done. This will fire with an Angular AnimationEvent
object when the animation completes. Ok, let’s bind to the done
event on our wobble animation. When
the animation is done, we want to switch
our wobbleField property back to false. Ok, let’s save and try this again. Still wobbles correctly the first time. And now, after it’s done, it wobbles again. So that’s cool. Now we’re just missing one last piece. We want to highlight it red after the
button is clicked when the animation starts. To do this we want to leverage a
global “invalid” class that we have. One possible way to do this is
to use the animation start event. The Angular AnimationEv
ent object
contains several pieces of information. For our example, we will be using two of these. We will use the fromState and the element. Alright, let’s see how. Ok, what we want to do is add the “invalid” class to the label element here
that has our animation trigger. And we’re going to use the start event to do this. But, before we do, let’s add the function we’ll
call on start that will do all of this for us. Over in our sign-up form code, let’s
add a function called “onWobbleStart”.
This function will take in an event, and
this event will be typed to an Angular AnimationEvent object which we need to be sure
not to confuse with the typescript AnimationEvent. And, for whatever reason, VS
Code in Stackblitz doesn’t seem to automatically import it for me so
I’ll go ahead and manually add it myself. It’s part of the animations module. Ok now, we are going to add a class
to the element from the object and we’ll use the renderer2 to do this,
so let’s inject it in the constru
ctor. Now, in our function, let’s add
this dot renderer dot addClass. The first parameter is the element we are adding
the class to, so let’s add event dot element. And then we add the class as the second parameter. I’m also going to log out the event
here in case we need it to troubleshoot. Now let’s add the start event in our template. Then we’ll call our onWobbleStart
function and pass it dollar sign event. Ok, let’s save this and check it out.
Huh, that’s strange, looks like the class
is already getting added even though
we haven’t triggered the animation. Well, this is a funny thing about animations. They start from a void state on initialization. Let’s take a look at the console so I
can show you what I’m talking about. Here we have the event that
fired on initialization. And you can see that the from state is void. Now, if I trigger the animation,
we see two more events fire. One event fires to actually trigger
the animation from false to true. And the other fires fro
m true to false
but that doesn’t trigger the animation. Ok, with that in mind, we need to
change the logic in our function. We only really want to add the class if
we’re not animating from a void state. Ok, now let’s save and check this out again. So, it’s not added on
initialization now, that’s good. And, it is properly added when the
animation starts now too, nice. So now you have yet another
animation tool available. You won’t always need these events but it’s
nice to know about them f
or when you do. Now remember, there’s still a lot to the animation
framework, so I’ll go ahead and stop here for now, but I will be creating several more videos on
Angular animations very soon so stay tuned! Until next time, thanks for watching.
Comments