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

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 #11810

Author: matsko

src/ngAnimate/animateCssDriver.js

@@ -215,18 +215,22 @@ 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 at all
-      options.event = animationDetails.event;
-      if (options.event === 'leave' && animationDetails.domOperation) {
-        options.onDone = animationDetails.domOperation;
+      if (animationDetails.structural) {
+        // structural animations ensure that the CSS classes are always applied
+        // before the detection starts.
+        options.applyClassesEarly = true;
+        options.structural = 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' && animationDetails.domOperation) {
+          options.onDone = animationDetails.domOperation;
+        }
+      } else {
+        options.event = null;
       }
 
       return $animateCss(element, options);

test/ngAnimate/animateCssDriverSpec.js

@@ -103,6 +103,14 @@ describe("ngAnimate $$animateCssDriver", function() {
         driver({ element: element });
         expect(capturedAnimation[1].applyClassesEarly).toBeFalsy();
       }));
+
+      it("should not provide a method into the $animateCss animation if the animation is not 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() {
@@ -209,7 +217,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({
@@ -236,6 +246,9 @@ describe("ngAnimate $$animateCssDriver", function() {
           element.addClass(details.event);
         };
 
+        fromAnimation.structural = true;
+        toAnimation.structural = true;
+
         var runner = driver({
           from: fromAnimation,
           to: toAnimation
@@ -261,6 +274,9 @@ describe("ngAnimate $$animateCssDriver", function() {
           });
         });
         inject(function() {
+          fromAnimation.structural = true;
+          toAnimation.structural = true;
+
           var runner = driver({
             from: fromAnimation,
             to: toAnimation
@@ -897,8 +913,10 @@ 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';
         fromAnimation.event = 'leave';
+        fromAnimation.structural = true;
 
         var leaveOp = function() { };
         fromAnimation.domOperation = leaveOp;