I wanted to revisit the ngAnimate directive in AngularJS, so I used Yeoman to generate an Angular app that I can try a few experiments with. The code for the project is available on Github here. Here’s a link to a live demo. As I mentioned before, the app was generated using Yeoman, which is a fantastic tool for frontend web development. If you haven’t taken a look at it already, please do.
Oh, and before I forget…if you’re interested in learning more about AngularJS beyond the documentation available on the AngularJS website, Year Of Moo has some fantastic articles that can help clear things up. The official documentation on the Angular website can be a little terse. I believe the blog’s author is a contributor to the AngularJS project, if fact, he may very well be an AngularJS employee.
So! Back to the matter at hand…ngAnimate.
This is an html partial that uses the ng-repeat directive to display an array of items…
We’ll add some animation that will slide the lower list in from the right when the page loads. The first step I’ll take to make this happen will be to create some css style rules that Angular will hook into in order to produce our desired effects…
It’s no coincidence that the classes all have “-enter-setup” and “-leave-setup” appended to their names. I mentioned before that ng-animate is a directive that has to be used in conjunction with other AngularJS directives like ng-view, ng-show, ng-hide, and in our case ng-repeat. Use classes with “-setup” to define your transition code and any initialization styles for your animation. Use classes with “-enter-start” to define the values you would like your transitions to animate to. Use classes with “-leave-start” to define values you would like your transitions to animate to when elements are removed from the DOM.
Here’s that demo link again.
