fix(ngAnimate): ensure CSS transitions/keyframes can be defined on the active classes

This allows for CSS transitions to be defined on the active CSS class if
desired.

Closes angular#12631

Author: matsko

src/ngAnimate/animateCss.js

@@ -577,7 +577,8 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       flags.applyAnimationDuration  = options.duration && flags.hasAnimations;
       flags.applyTransitionDelay    = truthyTimingValue(options.delay) && (flags.applyTransitionDuration || flags.hasTransitions);
       flags.applyAnimationDelay     = truthyTimingValue(options.delay) && flags.hasAnimations;
-      flags.recalculateTimingStyles = addRemoveClassName.length > 0;
+      flags.recalculateTimingStyles = addRemoveClassName.length > 0 ||
+                                      (activeClasses.length > 0 && !isStructural);
 
       if (flags.applyTransitionDuration || flags.applyAnimationDuration) {
         maxDuration = options.duration ? parseFloat(options.duration) : maxDuration;

test/ngAnimate/integrationSpec.js

@@ -338,6 +338,36 @@ describe('ngAnimate integration tests', function() {
         expect($animate.reflows).toBe(10);
       });
     });
+
+    they('should always run an animation if $prop styles are defined amoung the active CSS classes',
+      ['transition', 'keyframe'], function(event) {
+
+      module('ngAnimateMock');
+      inject(function($animate, $compile, $rootScope, $rootElement, $document, $$rAF) {
+        element = jqLite('<div ng-class="klass">animate me</div>');
+        element.addClass('animate-' + event);
+
+        ss.addRule('.animate-transition.red-add-active', 'transition:0.5s linear all; background:red;');
+        ss.addRule('.animate-keyframe.red-add-active', 'animation:0.5s linear animateRed;');
+
+        $rootElement.append(element);
+        jqLite($document[0].body).append($rootElement);
+
+        $compile(element)($rootScope);
+        $rootScope.$digest();
+
+        expect($animate.reflows).toBe(0);
+
+        $rootScope.klass = 'red';
+        $compile(element)($rootScope);
+        $rootScope.$digest();
+        $$rAF.flush();
+
+        expect(element).toHaveClass('red');
+        expect(element).toHaveClass('red-add');
+        expect(element).toHaveClass('red-add-active');
+      });
+    });
   });
 
   describe('JS animations', function() {