AngularJS animations with ngAnimate are really easy and fun. AngularJS directives are ngAnimate aware so after including ngAnimate as a dependency we can add animations and transitions. We can apply animations in different phases depending on directive use. In order to apply animations we can use CSS or JavaScript or both. Below is a simple case – CSS based animation with ng-show. This is a very simple animation – we need to add only one class to get animation up and running.

CSS

Last two selectors are important when considering menu – we want to open menu smoothly. So we need to add a transition with ease in both in and out phases. We will transform all elements. When showing or hiding element AngularJS just adds or removes ng-hide CSS class so, after AngularJS docs, we need just add a .ng-hide class in case of ng-show directive.

menu-panel class selector is animating opening of menu while menu panel with ng-hide selector is animating closing transition.

Now directives – I used lists so I don’t have to position the elements.

And finally html:

As you see menu is super easy to use and it is declarative – no DOM manipulation, no jQuery. Of course we can use jQuery in a convenient way with ngAnimate. See ngAnimate documentation.

Running example in plunkr.

Have a nice day 🙂 !