Now that we already know how to create animations for native directives, it would be nice if we could add animations to custom directives too. Sometimes, we might want to add motion to custom directives, think about a responsive menu directive that hides the menu when it's on a small device, and have a button to open or slide the menu items. An animation triggered inside this directive would be great.

This is accomplished by injecting the $animate service into the directive function. This is the same service used by native directives to trigger the animation events we learned in Chapter 3, Creating Our First Animation in AngularJS, and Chapter 4, JavaScript Animations in AngularJS.

In the custom directive, we can trigger events by calling $animate methods such as enter, leave, move, addClass, removeClass, and setClass.

Here, we will see a sample of the addClass and removeClass animations on a custom directive, which are the same events used by the...