What we have here is a list of menu items that we're going to actually be animating when you roll over and roll out. In the HTML, we have an array of menu items on the controller that's laying out the actual menu. I've created a menu item directive that has an active property on scope that we're actually using to keep track of whether or not the mouse is over the menu item or not.
Then i've created the start of an animation called "Menu Animation" that we're going to be filling out as we move along through the video. We are going to be using ngClass to trigger the animations. When this highlight class is added, we're going to do something, and then when the highlight class is removed, we are going to do something different.
In the HTML we're using ngRepeat to iterate over the menu array and lay out our menu. You can see here that we are attaching the menu item directive, and we're using mouseenter and mouseleave to toggle the active property to true or false. This is what is actually triggering the animation. Highlight is being added when active is true, and it's being removed when active is false. Then we have the menu animation here in class so that Angular knows to apply the animation that we've actually defined, by adding this menu animation class to our element.
We've actually included TweenMax. There's a lighter version called TweenLite, but when you include TweenLite you actually have to include the optional plugins one by one. For this case we're just going to use TweenMax. It's just the full featured big brother to TweenLite.
The nice thing about ngAnimate is that it actually gives you that element in as a parameter to the before class and before removeClass, so you don't actually have to look for it. Then we are going to set a Tween duration. Then we are going to create an object that has the properties that we want to animate on.
To start out with, we're just going to set the width to be 200. One of the things that's really important is we do need to call "Done" on complete, and then we are going to just paste this into the removeClass block, and just change this back to 160. Let's see what this looks like.
Now you can see when I roll over this is it is expanding the width to 200, and then when I roll out is it's setting it back to 160. That was pretty easy, but what if we want to actually animate over other properties? Let's say we wanted to actually change the color. That is also pretty easy. Let's set color to something green. Let's do 8925, like so. When we roll back over, or when we roll out, let's go ahead and set this back to just a gray. Now you can see that it's actually changing the test color to green.
Let's keep on with this example and just extend this just a little farther. Let's do something a little more complex. Let's actually animate the border left property. We're going to convert this into CamelCase, and let's set this to 20 pixels, we'll set it to solid, and let's set this to be the same color as the green text that we set up above.
Down here we'll just go ahead and set this back to 10 pixels, solid, and this we'll set it to a dark gray. Now you can see that not only is the color animating, but the border is animating as well. That's pretty neat. Let's just do one other thing, just visually that I think it's interesting. We will go ahead and set the duration on the remove to .4 seconds instead of .2. What this is going to do is create a neat, latent fade out, so you can see that, as I roll over, is you get this trail of the items are actually fading out faster than they've animated in, which is pretty neat.
Let's just review what we've done so far. We've included the TweenMax library. Then, using the two method on TweenLite, we are animating on the element for .2 seconds when highlight is added and .4 seconds when it is removed. We have an animation object with properties that we want to animate on. We are simply modifying width, color, and border left, and then on complete we are calling the done callback to let AngularJS know that something has happened, or that it can actually move on and clean itself up.
Let's see this animation one more time, refresh the page. When you roll over you get this nice, smooth, clean effect. Stay tuned for more videos on this topic. I will catch you next time.