Angular Animations

October 22, 2014

Couldn't get Angular animations working. Why? Because I hadn't defined 'ngAnimate' in my app module.

I wanted the receipt to animate in, a simple slide-down-and-in type thing. Most of the angular tutorials look god awful, so this is how you want to do it ifyou're not writing plain CSS:

.receipt {
// Animations
&.ng-hide-remove {
  @include animation(fade-in-and-down .35s ease-in);
  // @include animation-fill-mode(forwards);

Angular works by applying .ng-hide-remove, or .ng-hide-add for when you're toggling a box. (Seems like a roundabout naming schema, but whatever).

Unfortunately applying Bourbon's @include animation-fill-mode(forwards) didn't work in the way I was expecting it to. However, applying a transform: translateY(10px); in the base class did. Meh.