fix(ngAnimate): ensure that the temporary CSS classes are applied before detection

Prior to 1.4 the `ng-animate` CSS class was applied before the CSS
getComputedStyle detection was issued. This was lost in the 1.4
refactor, however, this patch restores the functionality.

Closes angular#11769
Closes angular#11804

Author: matsko

src/ngAnimate/animation.js

@@ -62,7 +62,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
         event: event,
         structural: isStructural,
         options: options,
-        start: start,
+        beforeStart: beforeStart,
         close: close
       });
 
@@ -88,15 +88,19 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
         animationQueue.length = 0;
 
         forEach(groupAnimations(animations), function(animationEntry) {
-          var startFn = animationEntry.start;
-          var closeFn = animationEntry.close;
+          // it's important that we apply the `ng-animate` CSS class and the
+          // temporary classes before we do any driver invoking since these
+          // CSS classes may be required for proper CSS detection.
+          animationEntry.beforeStart();
+
           var operation = invokeFirstDriver(animationEntry);
-          var startAnimation = operation && operation.start; /// TODO(matsko): only recognize operation.start()
-          if (!startAnimation) {
+          var triggerAnimationStart = operation && operation.start; /// TODO(matsko): only recognize operation.start()
+
+          var closeFn = animationEntry.close;
+          if (!triggerAnimationStart) {
             closeFn();
           } else {
-            startFn();
-            var animationRunner = startAnimation();
+            var animationRunner = triggerAnimationStart();
             animationRunner.done(function(status) {
               closeFn(!status);
             });
@@ -173,9 +177,9 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
           if (!anchorGroups[lookupKey]) {
             var group = anchorGroups[lookupKey] = {
               // TODO(matsko): double-check this code
-              start: function() {
-                fromAnimation.start();
-                toAnimation.start();
+              beforeStart: function() {
+                fromAnimation.beforeStart();
+                toAnimation.beforeStart();
               },
               close: function() {
                 fromAnimation.close();
@@ -241,7 +245,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
         }
       }
 
-      function start() {
+      function beforeStart() {
         element.addClass(NG_ANIMATE_CLASSNAME);
         if (tempClasses) {
           $$jqLite.addClass(element, tempClasses);

test/ngAnimate/animationSpec.js

@@ -734,6 +734,29 @@ describe('$$animation', function() {
       expect(element).not.toHaveClass('ng-animate');
     }));
 
+
+    it('should apply the `ng-animate` and temporary CSS classes before the driver is invoked', function() {
+      var capturedElementClasses;
+
+      module(function($provide) {
+        $provide.factory('mockedTestDriver', function() {
+          return function(details) {
+            capturedElementClasses = details.element.attr('class');
+          };
+        });
+      });
+
+      inject(function($$animation, $rootScope) {
+        $$animation(element, 'enter', {
+          tempClasses: 'temp-class-name'
+        });
+        $rootScope.$digest();
+
+        expect(capturedElementClasses).toMatch(/\bng-animate\b/);
+        expect(capturedElementClasses).toMatch(/\btemp-class-name\b/);
+      });
+    });
+
     it('should perform the DOM operation at the end of the animation if the driver doesn\'t run it already',
       inject(function($$animation, $rootScope) {