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

3.1 ngClass

Many of the directives in AngularJS have built-in animation support. We'll start learning these by animating ngClass.

3.1 ngClass

Angular has many directives that have built in animation support. And we're going to start looking at them with the ngClass directive. Now this is used in order to dynamically add and remove CSS classes to and from an element. In the Sound Board application, I have used ngClass to toggle the side bar. Whenever we click on the title of the side bar, it toggles the state of the side bar. So here we see it is mostly closed, and then we click on it again to open it back up. Now of course, there is no animation here. It just pops into place, and then it pops right back into place. And we want to add some animation, so that it slides out and then slides in. But before we get into that, let's first of all look at the code behind that functionality. Let's start in at JS, where I have to find a value called toggle, and it is initialized as true. And then there's a function called toggle sidebar, where the toggle value is toggled. As you can see toggle is set to the opposite of it's current value. Inside of the markup, we can see where these two pieces are used. Here, we can see ng-click is used in order to toggle the side bar. So whenever we click on sound board or on the icon, it's going to call that function, and it's going to change the value of toggle, which is then used in ng-class for this div element of with an id of sidebar-wrapper. So, when toggle is true, this open class is added to this div element. When toggle is false, the open class is removed from the element. Well, let's animate this, and it's very easy to do so. Because ngAnimate sets it up so that all we have to do is add certain CSS classes in order to animate this element. NgAnimate goes through several steps when ngClass adds a class to an element. It starts by adding our class, but it appends -add to the class. So it will add open-add in our case, and then it will add another class, open-add-active. And then finally it will add our class by itself, just open. So there's essentially three steps here, and we can take advantage of these steps by adding in our animation and transitions. So in the open-add we can set up our transition here. Now we are going to transition to properties, the left and the margin-left properties, but we can simplify that by simply stating all. But then we need to specify the duration. Now we don't want something that's too slow, because we want to user to feel like things are reactive and fluid. But at the same time, we don't want something too quick. So let's go with something like two-tenths of a second. That ought to be fast enough, but it should also be slow enough as well. And then in the open-add-active, we can set the final values of our margin-left and left properties. So let's start with margin-left, that's going to be 0, and then left is going to be 0. And then we could also set those same values in the open class, but we don't really need to do that because that has already been specified in the style sheet. Otherwise the side bar wouldn't currently toggle between the two states. So in our case we just need open-add, and then open-add-active. Now we should increase the specificity here, because we could be using that open class in other parts of the page. So this is for the sidebar wrapper, and we will just take that and paste that there. So, if we save this, let's go back and let's refresh. Now, whenever we close it, we aren't going to see any animation because we haven't set up that animation. But whenever we open the sidebar, it's going to slide into place. So now we just need to go back to our CSS and we need to add some classes for when the open class Is removed from the element. Now ngAnimate is going to go through the same set of steps, except that instead of -add it's going to have a class called open-remove. So let's just copy that, let's paste it in, and we will set -remove here. And just like add, this is is where we will set up our animation. And then, after ngAnimate adds the open-remove, it's going to add an open-remove-active. So we could come down here, and we could add another rule, open-remove-active. And then we could set margin-left to be whatever the value it was before, and the same with left, but we don't have to do that here. Because once the open class is removed from the element, the values for margin-left and left are going to go back to whatever it is that they were. So now we can go back to the browser. Let's refresh, and we will see the animation both when the side bar closes and when it opens. And so, animating ngClass is very simple, ngAnimate goes through three steps when a class is added to an element. The first is to use the class name with -add, the second is to use the class name with -add-active, and then the third is to just have the class itself. And there are three steps when a class is removed. The first is the class name, followed by -removed, and then there is -removed-active, and then the third step is the class is removed from the element. Well in the next lesson,we are going to look at how we can animate ngView.

Back to the top