Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Animate
  • Overview
  • Transcript

4.1 Using the $animateCss Service

The $animateCss service is new to Angular 1.4, and it's the animation engine that drives all of the animations we've seen in this course. In this lesson, you'll learn how to use it to write your own animations.

4.1 Using the $animateCss Service

Throughout this entire course, we have used pure CSS in order to animate our soundboard application, but ngAnimate also allows us to use JavaScript to create our own animations, so that's what we're going to do in this lesson. We are going to write an animation for ngRepeat so we are going to replace the enter and leave animations that we used for our post list and we are going to replace it with a JavaScript based animation. Now, it's going to be the same animation. We are going to be adjusting the opacity and the margin bottom. But it is going to be better. Because one of the things about JavaScript animations is that they can be dynamic. For example, if we come and change the margin bottom of our HR element from 40 to 80, that's going to cause our existing animation to have some issues. Because we used that value of 40 in our calculation for the margin-bottom value. And things are going to get a little choppy, as you can see here. With a JavaScript animation, we don't have to worry about that, because with JavaScript we can get to the value of the margin-bottom, and we can use that in the calculation. So anytime we change margin bottom or if we change the height of a post, then we don't have to go to some other part of our CSS and make those same changes. It's just going to automatically be done for us. Because JavaScript is doing it behind the scenes. So let's add a new folder to our JS folder. And let's just call it animations and in this new folder let's create a new JavaScript file and I'm going to call it posts. Now, the reason why I'm calling it posts is because whenever you defined an animation, you do so based upon a CSS class that you will be adding to the element that you want to animate. So you use app, and then we use the animation method, and then we define the name of this animation. So we start with a period, because this is a CSS class, and if we did post-list, then we would have to take this class name and apply it to the element that has our ngRepeat directive. So we would have to go to views, home, and then right here where we have class="posts, we would also need to include post-list. Now, because we already have posts, there's really no reason for us to have a different name here, because we already have a class I'm going to use that existing class. Next, we need to write a function that is going to return an object, and this object will have methods for the enter and leave animations, and if this was going to be an animation that we would use in other directives, then it would have stuff like add class or remove class. Those other two methods would be used in the case of ng-class or ng-show and hide. So we want our function, but we also want to use the new animate CSS service. This is new as of Angular 1.4, and this is the service that is responsible for everything that we have seen in this course. So all of the animation that we have been using with CSS classes, has actually been handled by this CSS service, or this animate CSS service. So we are going to inject that dependency and we'll just call it animateCss. And then, we want to return our object. So since this is strictly for an ngRepeats we will have an object that has two methods, one is going to be enter and the others going to be leaves. So our enter is going to be a function that accepts true arguments. It's going to be element which is going to be the element that we are animating and then a function to call when everything is done. Now, we don't always have to call done but I will show you some cases where you might want to do so. And we have enter and let's go ahead and also to find leave and that's going to have the same signature so element and done. And these are the methods that are going to be used for our animation. Now, as I mentioned if this was going to be an animation that we would use with other directives we would have other methods here. So for the ng-class or ng-show and hide where we are adding and removing classes, we would have addClass and then the function signature is element and className. And then done, and the same thing is true for remove class. But since this is strictly for our ngRepeat directive then we are just going to have enter and leave. Now, I'm going to leave this alone for now. I'm not even going to call done. And we are going to see what happens. But first, we need to go to our animate CSS file, and let's comment out everything that we have for ngRepeat, so that we aren't relying on any CSS here. And we also need to add a reference to our post JS file inside of index. So let's scroll on down to where we have defined those JavaScript files and I'm just going to drag that in there. So let's save home, let's go to the browser and refresh, and I'm going to perform a search. I'm just gonna do a search for f, so that we can hopefully see first and fourth. But we're not going to see anything at all. Nothing happens. And the reason is because whenever we go back to our animation, we haven't called done. So we need to call done here, so let's do that and by doing so, whatever is next in the chain is going to execute and we will see that those elements are going to be removed, so now we just see first and fourth and they will be added back whenever we clear out our search box. Well, let's start working on the leave animation. So let's, first of all, get rid of this call to done. Because in our case we aren't going to have to call done. We are going to use the animateCss service and we will return the result of calling that, but before we do that we need to get all of the information for the leave animation. We need to get the height of our element. We also need to get the margin bottom of the H, our element. So I'm going to start by creating a variable called el. This is going to be for our element because what we have for our element's perimeter is actually an array of elements, and we have only one element here, so we are going to retrieve the element at index of zero. The next thing we need to get is the height of this element. Now, this is going to be the element of our ngRepeat, so it is going to be this entire div element, and we are going to get its offset height. So let's just call this height and el offsetHeight. And then, we need to get the value for the margin bottom of that HR element. So I'm going to create a variable called hr. And we need to, first of all, retrieve that element. Well, it is a child of our current element, so we can do el and then querySelector and we want the hr and then we can use getComputedStyle to get to the margin bottom. So let's call this variable margin. And we want to parse this because it is going to have px appened to our value. And we'll call getComputedStyle, we'll pass in our hr element, and we want to get the property value of margin-bottom. And we also need the radix for parse int, so we have our height, we have our margin. The next thing that we need to do is set up our animation. So this is where we are going to use our animateCss service and we are going to return the call to that. So animateCss. We want to pass in the element that we're working with. And then, we pass an object that has a variety of options. Now, in our case, we want to set up where we want the opacity and the bottom margin values to be. So we're going to use an option called to. And we will set opacity to 1. Or no, we want 0 because this is the leave animation. And then, we wanna set marginBottom to the calculation of the height and the margin. And we want that to be a negative value. So let's do var value =, we want to take the height + margin. And we will multiply that by -1. So that we have a negative value. And we will set margin bottom to value and then px. Now, the last thing that we need to do is set up the duration for this animation. And we can do that here, by using another option, called duration, and then we can set whatever seconds that we want that duration to be. But this is something I would rather do in the CSS. So let's go back to animateCss. Let's go down to where we have the ngRepeat. And we are going to add our posts class. And let's just do a transition of all. And let's just do 3/10 of a second, that ought to be fine. So let me make sure posts is okay. This should work. Let's go back to our browser, let's refresh, and we should see our animation for leave. And we do. And that is pretty smooth actually. I mean, the scroll bar kinda messes things up because things begin to scoot over, and it looks a little choppy because of that. But that is pretty smooth. So now we just need to do the enter animation, and we already have a lot of that work already done. We have the height of the element, we have the margin of the hr element. So we can just copy what we have for leave, and paste that for enter. But, of course, what we have for to is going to change, because we no longer want to go to an opacity of zero. But we'll want to go to an opacity of one. And instead of setting margin bottom to our calculated value, we just want to set it back to its original value, which is what we have in our margin variable. But we also want to say where we are coming from. If we just try to run this as is we aren't going to see our animation. So we're going to use another option called from. And we are going to set our opacity to 0 and then our margin bottom is basically going to be what we had set it to down in the leave animation. So let's just copy that and paste that in there. Now, of course, since we have a lot of repeated code, we could write a function that would perform the calculations and give us the values that we need and that would clean up a lot of this. But I'm going to leave this as is. So let's go to the browser, let's refresh, and let's do a search for f. We are going to see our leave animation, and now we will see the animation for enter by clearing the search box, and that is very smooth. Both ways. So now, we can go back to our site, CSS, and we can change our margin bottom on the hr element from 40 to 80. And we aren't going to have the jerky animation that we had when we used just pure CSS. Now, we will see this smooth animation. Well, let's briefly talk about this animateCss service. Now, whenever we call animateCss, we aren't actually performing that animation. We are setting up the animation in order to perform. And by returning animateCss, we are letting ngAnimate execute that animation for us. However, we don't have to do that if we don't want to. We can control when we execute that animation. So let's do this. Let's do var animator = and then we will call animateCss and then we have an object here that allows us to start the animation or to end the animation. So we have two methods. One is called start and one is called end, but most of the time we want to start an animation. And of course this is going to return a promise, so we will return, and then whenever the animation completes, we can use the done method here. And we can have our callback. And then, inside of here we would definitely want to call our own done that we got as our done argument. But we can also do some other things inside of this callback. For example, if we add a class to this element, we could clean that class up if we needed to do so. Let's just do that. There's another option that we can pass to animateCss, and that is addClass. And we can add a variety of classes here, but we're just going to do one. Let's do foobar. And then, we will go to the browser's development tools. Let's first of all refresh. And let's set a break point on that call to animate. So let's go ahead to sources. Js, animations, posts and around here, on line ten, we will set our break point. So let's filter our results, let's clear out the search box, and we hit our breakpoint. So let's just step over the call to animate and let's go to the elements tab and let's drill down to our elements. So here is the element that is being added to the document and notice the class list. We have foobar-add. So ngAnimate is taking that class that we are adding to that element and it is appending-add to it just like we have used in the other CSS-based animations. And then, whenever the animation completes, we will no longer have that foobar-ad, instead we will have, just foobar. So if we wanted to, back inside of this call back, when the animation has completed, we could say, element, or no, we don't have to do that, we have el. And then classList and then remove and foobar. And that would clean up that class if that is something that we wanted to do. So our animations can be as simple as this or it can be much more complex. It just depends upon what we need for our application. And there's also many other options. I'll provide a link in the lesson description. That has all of the options that we can pass to animateCss. And so, creating an animation with JavaScript is relatively straightforward. We use the animateCss service which has a lot of flexibility, and obviously a lot of power, because the entire animation system is built on it.

Back to the top