fix($animateCss): the transitions options delay value should be applied before class application

When `options.delay` is passed into `$animateCss`the delay style would be
applied after the add/remove CSS classes are evaluated (for transitions).
At this point it is too late for the delay to be picked up (this
functionality however does work with keyfarme animations).

This patch ensures that the provided `options.delay` value is
applied before the CSS classes are applied to the element.

Closes #12584

Author: matsko

src/ngAnimate/animateCss.js

@@ -598,6 +598,18 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
         return closeAndReturnNoopAnimator();
       }
 
+      if (options.delay != null) {
+        var delayStyle = parseFloat(options.delay);
+
+        if (flags.applyTransitionDelay) {
+          temporaryStyles.push(getCssDelayStyle(delayStyle));
+        }
+
+        if (flags.applyAnimationDelay) {
+          temporaryStyles.push(getCssDelayStyle(delayStyle, true));
+        }
+      }
+
       // we need to recalculate the delay value since we used a pre-emptive negative
       // delay value and the delay value is required for the final event checking. This
       // property will ensure that this will happen after the RAF phase has passed.
@@ -809,27 +821,16 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
             flags.hasAnimations = timings.animationDuration > 0;
           }
 
-          if (flags.applyTransitionDelay || flags.applyAnimationDelay) {
+          if (flags.applyAnimationDelay) {
             relativeDelay = typeof options.delay !== "boolean" && truthyTimingValue(options.delay)
                   ? parseFloat(options.delay)
                   : relativeDelay;
 
             maxDelay = Math.max(relativeDelay, 0);
-
-            var delayStyle;
-            if (flags.applyTransitionDelay) {
-              timings.transitionDelay = relativeDelay;
-              delayStyle = getCssDelayStyle(relativeDelay);
-              temporaryStyles.push(delayStyle);
-              node.style[delayStyle[0]] = delayStyle[1];
-            }
-
-            if (flags.applyAnimationDelay) {
-              timings.animationDelay = relativeDelay;
-              delayStyle = getCssDelayStyle(relativeDelay, true);
-              temporaryStyles.push(delayStyle);
-              node.style[delayStyle[0]] = delayStyle[1];
-            }
+            timings.animationDelay = relativeDelay;
+            delayStyle = getCssDelayStyle(relativeDelay, true);
+            temporaryStyles.push(delayStyle);
+            node.style[delayStyle[0]] = delayStyle[1];
           }
 
           maxDelayTime = maxDelay * ONE_SECOND;

test/ngAnimate/animateCssSpec.js

@@ -1671,11 +1671,13 @@ describe("ngAnimate $animateCss", function() {
 
     describe("options", function() {
       var element;
-      beforeEach(inject(function($rootElement, $$body) {
-        $$body.append($rootElement);
+      beforeEach(module(function() {
+        return function($rootElement, $$body) {
+          $$body.append($rootElement);
 
-        element = jqLite('<div></div>');
-        $rootElement.append(element);
+          element = jqLite('<div></div>');
+          $rootElement.append(element);
+        };
       }));
 
       describe("[$$skipPreparationClasses]", function() {
@@ -1862,7 +1864,6 @@ describe("ngAnimate $animateCss", function() {
           animator.start();
           triggerAnimationStartFrame();
 
-
           var prop = element.css('transition-delay');
           expect(prop).toEqual('500s');
         }));
@@ -1978,6 +1979,53 @@ describe("ngAnimate $animateCss", function() {
           expect(element.css('transition-delay')).toEqual('10s');
         }));
 
+        it("should apply the keyframe and transition duration value before the CSS classes are applied", function() {
+          var classSpy = jasmine.createSpy();
+          module(function($provide) {
+            $provide.value('$$jqLite', {
+              addClass: function() {
+                classSpy();
+              },
+              removeClass: function() {
+                classSpy();
+              }
+            });
+          });
+          inject(function($animateCss, $rootElement) {
+            element.addClass('element');
+            ss.addRule('.element', '-webkit-animation:3s keyframe_animation;' +
+                                           'animation:3s keyframe_animation;' +
+                                           'transition:5s linear all;');
+
+            var options = {
+              delay: 2,
+              duration: 2,
+              addClass: 'superman',
+              $$skipPreparationClasses: true,
+              structural: true
+            };
+            var animator = $animateCss(element, options);
+
+            expect(element.attr('style') || '').not.toContain('animation-delay');
+            expect(element.attr('style') || '').not.toContain('transition-delay');
+            expect(classSpy).not.toHaveBeenCalled();
+
+            //redefine the classSpy to assert that the delay values have been
+            //applied before the classes are added
+            var assertionsRun = false;
+            classSpy = function() {
+              assertionsRun = true;
+              expect(element.css(prefix + 'animation-delay')).toEqual('2s');
+              expect(element.css('transition-delay')).toEqual('2s');
+              expect(element).not.toHaveClass('superman');
+            };
+
+            animator.start();
+            triggerAnimationStartFrame();
+            expect(assertionsRun).toBe(true);
+          });
+        });
+
         it("should apply blocking before the animation starts, but then apply the detected delay when options.delay is true",
           inject(function($animateCss, $rootElement) {
 
@@ -1995,41 +2043,28 @@ describe("ngAnimate $animateCss", function() {
           animator.start();
           triggerAnimationStartFrame();
 
-          expect(element.css('transition-delay')).toEqual('1s');
+          expect(element.attr('style') || '').not.toContain('transition-delay');
         }));
 
-        they("should consider a negative value when delay:true is used with a $prop animation", {
-          'transition': function() {
-            return {
-              prop: 'transition-delay',
-              css: 'transition:2s linear all; transition-delay: -1s'
-            };
-          },
-          'keyframe': function(prefix) {
-            return {
-              prop: prefix + 'animation-delay',
-              css: prefix + 'animation:2s keyframe_animation; ' + prefix + 'animation-delay: -1s;'
-            };
-          }
-        }, function(testDetailsFactory) {
+        it("should consider a negative value when delay:true is used with a keyframe animation",
           inject(function($animateCss, $rootElement) {
-            var testDetails = testDetailsFactory(prefix);
 
-            ss.addRule('.ng-enter', testDetails.css);
-            var options = {
-              delay: true,
-              event: 'enter',
-              structural: true
-            };
+          ss.addRule('.ng-enter', prefix + 'animation:2s keyframe_animation; ' +
+                                  prefix + 'animation-delay: -1s;');
 
-            var animator = $animateCss(element, options);
+          var options = {
+            delay: true,
+            event: 'enter',
+            structural: true
+          };
 
-            animator.start();
-            triggerAnimationStartFrame();
+          var animator = $animateCss(element, options);
 
-            expect(element.css(testDetails.prop)).toContain('-1s');
-          });
-        });
+          animator.start();
+          triggerAnimationStartFrame();
+
+          expect(element.css(prefix + 'animation-delay')).toContain('-1s');
+        }));
 
         they("should consider a negative value when a negative option delay is provided for a $prop animation", {
           'transition': function() {