fix(ngAnimate): class-based animations must not set addClass/removeClass CSS classes on the element

matsko · matsko · commit 3a3db690a16e · 2015-05-20T20:41:39.000-07:00
With the abstraction system that ngAnimate uses, $animateCss internally sets the provided `event` as a CSS class on the element. In this situation the `addClass` and `removeClass` events on the element as a CSS class. This should not happen with class-based animations and this feature is unnecessary and has now been removed. Closes angular#11810
diff --git a/src/ngAnimate/animateCssDriver.js b/src/ngAnimate/animateCssDriver.js
@@ -226,20 +226,20 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
       var element = animationDetails.element;
       var options = animationDetails.options || {};
 
-      options.structural = animationDetails.structural;
-
-      // structural animations ensure that the CSS classes are always applied
-      // before the detection starts.
-      options.applyClassesEarly = options.structural;
-
-      // we special case the leave animation since we want to ensure that
-      // the element is removed as soon as the animation is over. Otherwise
-      // a flicker might appear or the element may not be removed until all
-      // the other animations have completed themselves (which would then
-      // leave a pending element in the background).
-      options.event = animationDetails.event;
-      if (options.event === 'leave') {
-        options.onDone = options.domOperation;
+      if (animationDetails.structural) {
+        // structural animations ensure that the CSS classes are always applied
+        // before the detection starts.
+        options.structural = options.applyClassesEarly = true;
+
+        // we special case the leave animation since we want to ensure that
+        // the element is removed as soon as the animation is over. Otherwise
+        // a flicker might appear or the element may not be removed at all
+        options.event = animationDetails.event;
+        if (options.event === 'leave') {
+          options.onDone = options.domOperation;
+        }
+      } else {
+        options.event = null;
       }
 
       var animator = $animateCss(element, options);
diff --git a/test/ngAnimate/animateCssDriverSpec.js b/test/ngAnimate/animateCssDriverSpec.js
@@ -97,13 +97,21 @@ describe("ngAnimate $$animateCssDriver", function() {
         expect(isFunction(runner.start)).toBeTruthy();
       }));
 
-      it("should signal $animateCss to apply the classes early when an event is present", inject(function() {
+      it("should signal $animateCss to apply the classes early when animation is structural", inject(function() {
         driver({ element: element, structural: true });
         expect(capturedAnimation[1].applyClassesEarly).toBeTruthy();
 
         driver({ element: element });
         expect(capturedAnimation[1].applyClassesEarly).toBeFalsy();
       }));
+
+      it("should only set the event value if the animation is structural", inject(function() {
+        driver({ element: element, structural: true, event: 'superman' });
+        expect(capturedAnimation[1].event).toBe('superman');
+
+        driver({ element: element, event: 'batman' });
+        expect(capturedAnimation[1].event).toBeFalsy();
+      }));
     });
 
     describe("anchored animations", function() {
@@ -214,7 +222,9 @@ describe("ngAnimate $$animateCssDriver", function() {
             'out': jqLite('<div></div>')
           };
 
+          fromAnimation.structural = true;
           fromAnimation.element.append(anchorAnimation['out']);
+          toAnimation.structural = true;
           toAnimation.element.append(anchorAnimation['in']);
 
           var animator = driver({
@@ -241,6 +251,9 @@ describe("ngAnimate $$animateCssDriver", function() {
           element.addClass(details.event);
         };
 
+        fromAnimation.structural = true;
+        toAnimation.structural = true;
+
         var runner = driver({
           from: fromAnimation,
           to: toAnimation
@@ -267,6 +280,9 @@ describe("ngAnimate $$animateCssDriver", function() {
           });
         });
         inject(function() {
+          fromAnimation.structural = true;
+          toAnimation.structural = true;
+
           var runner = driver({
             from: fromAnimation,
             to: toAnimation
@@ -907,8 +923,11 @@ describe("ngAnimate $$animateCssDriver", function() {
       it("should pass the provided domOperation into $animateCss to be run right after the element is animated if a leave animation is present",
         inject(function($rootElement, $$rAF) {
 
+        toAnimation.structural = true;
         toAnimation.event = 'enter';
         toAnimation.options = {};
+
+        fromAnimation.structural = true;
         fromAnimation.event = 'leave';
         fromAnimation.options = {};
 
