Animate.css Support for Angular-Growl

Ever find yourself writing a Single Page App (SPA) and asking "where to display those blasted UI notifications, XHR error messages and the like"? Look no further. I recently came across a splendid AngularJS module for this very purpose. You can check out angular-growl @ https://github.com/marcorinck/angular-growl. It's a cinch to incorporate into your Angular app and easy to use. Just a few minutes and you can be popping relevant notifications à la Mac OS X.

While I love the module as is, I thought...why not add a little flavor. Enter Animate.css and the ngAnimate module. With these two powerful animation frameworks, we can very easily spruce up the default show / hide behavior of angular-growl (along with many other animate-able directives). Check the AngularJS dev guide if you're not sure how to include animation support in your app - b/c we'll need it. Next add the Animate.css animation styles to your page.

I'll leave a detailed explanation of combining AngularJS animations w/ Animate.css for more articulate bloggers. If you're so inclined, check out these posts for a solid intro to the concept (optional - but recommended - reading for this exercise):

• http://www.divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css
• http://odetocode.com/blogs/scott/archive/2014/02/25/easy-animations-for-angularjs-with-animate-css.aspx

Now for the magic. After adding ngAnimate and Animate.css, all we have to do is replace the default angular-growl css with the following:

Check out a demo here: http://jsfiddle.net/seandez/24Ewe/2/. Not too bad for a little extra pizazz...