Angular 1.2 introduces new animation functionality. This episode looks at the very basics of getting the animation module loaded and using it to create your first simple animation with CSS.

animation basics

**John Lindquist**: Angular 1.2 introduces some pretty serious changes to animation. So when you click download and you're getting the latest version, make sure you go into the extras and get angular-animate.js. You'll need it to be able to use animations now. So we'll load that in. Angular-animate. Then also make sure that you include it in your module when you load it in. It's called NG Animate. From there, you are ready to start using animations.

I just have a property here called "toggle," which is set to true by default. I'll set up a button with the class of button. I'll say, "toggle animation." Then when I click this, let's say click, we'll set up toggle to the inverse of at toggle. Then from there, if we set up a div or anything and we assign it to a class, and this class is going to be where we have our transitions or animations. We'll call it toggle -- sounds like a great name.

From there, we also need to bind this to an NG If, just doing the most basic one possible. If you haven't seen NG If before, it's just going to add and remove this element based on whether this is true. So if at toggle is true, it'll create it. If it's false, it'll remove it.

Anyway, so back to toggle. We will create a style for that. I know this is a lot of steps but bear with me. So, toggle. We will create our transition here, which will be a linear of one second. Then, as it's being created, we want to start at an opacity of zero. This way we can fade it in from zero to one. So while it's being created and it's actively doing the transition or animation, we'll just set the opacity to one. It's going to go from zero to one.

Then on the flip side, whenever it's being destroyed or removed or it's leaving the dome, we'll say, leave instead of enter. It's going to start at one because it's starting to leave. And then, when it's actively left or gone, we'll set it to zero.

If I did all that right, I'll hit refresh and I click on toggle animation, I probably should put some content here. Then when I click on toggle animation, it should fade in and out for one second based on the style as defined here. Linearly, for one second, it starts at zero, goes to one when it enters. So it's leaving right now. That first animation you see is this one. But then when I click again, NG IF is at true, it's entering, and you'll see it fades back in to one.

Again, the steps. Make sure you get the animate script included. Then load that module NG Animate in there and simply use the class. There's no more NG Animate attribute. Set it to the class name that you are going to use the NG, I guess class name spaces, style name spaces on this to interactive leave active. This is just for the NG IF stuff. I'll cover more animations in the future.

animation basics

Share this video with your friends