Angular provides a $animation service and ngAnimate directive in the angular-animate.js module (you have to include it separately, after angular.js). These things provide hooks that facilitate animations either through CSS transitions, CSS keyframe animations, or old school JS timeout loops/DOM modification ala jQuery.
You're encouraged to use CSS, as you get better performance and it is easier to separate and maintain presentation from markup and application code.
First, the developer guide on animations, second, an angular animate tutorial, and lastly, API docs for the ngAnimate module.
When you include the ngAnimate module, certain directives will automatically hook into animate (such as ngShow, ngHide, ngRepeat, etc.). By default, they simply add classes to trigger CSS transitions and all you need to do is make sure you have CSS class names to do what you want.
In the case of ngShow (or ngHide), it will add the classes ng-hide, ng-hide-add, and then ng-hide-add-active to start transitioning when hiding. When the animation completes, it'll just leave ng-hide. When you show, it'll remove ng-hide and add ng-hide-remove and ng-hide-remove-active. Sounds complicated, but it's not bad. It's pretty formulaic. These states are there to facilitate smooth transitions.
For my example in this plunk, all I did was include angular-module.js after angular.js and include ngAnimate in my module. Then I added the following CSS to make a crude blind-like animation for elements with the selector .fancy:
.fancy {
padding:10px;
border:1px solid black;
background:red;
}
.fancy.ng-hide-add, .fancy.ng-hide-remove {
-webkit-transition:all linear 5s;
-moz-transition:all linear 5s;
-o-transition:all linear 5s;
transition:all linear 5s;
display:block!important;
}
.fancy.ng-hide-add.ng-hide-add-active,
.fancy.ng-hide-remove {
max-height: 0;
}
.fancy.ng-hide-add,
.fancy.ng-hide-remove.ng-hide-remove-active {
max-height:100px;
}
This transition is just a simple example. You'll probably want improve on it, as the max-height thing is a bit of a hack. Consider using one created for you over at Animate.css.
Anyways, with the CSS is in place, all I do is use ngShow normally, giving the element the fancy class so the right transitions are applied when it shows and hides.
