Angular Animations

October 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.