chore(ngAnimate): skip adding the preparation classes when options.$$skipPreparationClasses is present

Author: matsko

src/ngAnimate/animateCss.js

@@ -200,8 +200,8 @@
  * * `stagger` - A numeric time value representing the delay between successively animated elements
  * ({@link ngAnimate#css-staggering-animations Click here to learn how CSS-based staggering works in ngAnimate.})
  * * `staggerIndex` - The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item in the stagger; therefore when a
- * `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)
- * `applyClassesEarly` - Whether or not the classes being added or removed will be used when detecting the animation. This is set by `$animate` when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time. (Note that this will prevent any transitions from occuring on the classes being added and removed.)
+ * * `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)
+ * * `applyClassesEarly` - Whether or not the classes being added or removed will be used when detecting the animation. This is set by `$animate` when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time. (Note that this will prevent any transitions from occuring on the classes being added and removed.)
  *
  * @return {object} an object with start and end methods and details about the animation.
  *
@@ -552,14 +552,14 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
         addRemoveClassName = '';
       }
 
-      var setupClasses = [structuralClassName, addRemoveClassName].join(' ').trim();
-      var fullClassName = classes + ' ' + setupClasses;
-      var activeClasses = pendClasses(setupClasses, '-active');
+      var preparationClasses = [structuralClassName, addRemoveClassName].join(' ').trim();
+      var fullClassName = classes + ' ' + preparationClasses;
+      var activeClasses = pendClasses(preparationClasses, '-active');
       var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
 
       // there is no way we can trigger an animation since no styles and
       // no classes are being applied which would then trigger a transition
-      if (!hasToStyles && !setupClasses) {
+      if (!hasToStyles && !preparationClasses) {
         return closeAndReturnNoopAnimator();
       }
 
@@ -574,10 +574,12 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
         };
       } else {
         cacheKey = gcsHashFn(node, fullClassName);
-        stagger = computeCachedCssStaggerStyles(node, setupClasses, cacheKey, DETECT_STAGGER_CSS_PROPERTIES);
+        stagger = computeCachedCssStaggerStyles(node, preparationClasses, cacheKey, DETECT_STAGGER_CSS_PROPERTIES);
       }
 
-      $$jqLite.addClass(element, setupClasses);
+      if (!options.$$skipPreparationClasses) {
+        $$jqLite.addClass(element, preparationClasses);
+      }
 
       var applyOnlyDuration;
 
@@ -723,7 +725,9 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
         animationClosed = true;
         animationPaused = false;
 
-        $$jqLite.removeClass(element, setupClasses);
+        if (!options.$$skipPreparationClasses) {
+          $$jqLite.removeClass(element, preparationClasses);
+        }
         $$jqLite.removeClass(element, activeClasses);
 
         blockKeyframeAnimations(node, false);
@@ -846,7 +850,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
           $$jqLite.addClass(element, activeClasses);
 
           if (flags.recalculateTimingStyles) {
-            fullClassName = node.className + ' ' + setupClasses;
+            fullClassName = node.className + ' ' + preparationClasses;
             cacheKey = gcsHashFn(node, fullClassName);
 
             timings = computeTimings(node, fullClassName, cacheKey);

test/ngAnimate/animateCssSpec.js

@@ -1641,6 +1641,45 @@ describe("ngAnimate $animateCss", function() {
         $rootElement.append(element);
       }));
 
+      describe("[$$skipPreparationClasses]", function() {
+        it('should not apply and remove the preparation classes to the element when true',
+          inject(function($animateCss) {
+
+          var options = {
+            duration: 3000,
+            to: fakeStyle,
+            event: 'event',
+            structural: true,
+            addClass: 'klass',
+            $$skipPreparationClasses: true
+          };
+
+          var animator = $animateCss(element, options);
+
+          expect(element).not.toHaveClass('klass-add');
+          expect(element).not.toHaveClass('ng-event');
+
+          var runner = animator.start();
+          triggerAnimationStartFrame();
+
+          expect(element).not.toHaveClass('klass-add');
+          expect(element).not.toHaveClass('ng-event');
+
+          expect(element).toHaveClass('klass-add-active');
+          expect(element).toHaveClass('ng-event-active');
+
+          element.addClass('klass-add ng-event');
+
+          runner.end();
+
+          expect(element).toHaveClass('klass-add');
+          expect(element).toHaveClass('ng-event');
+
+          expect(element).not.toHaveClass('klass-add-active');
+          expect(element).not.toHaveClass('ng-event-active');
+        }));
+      });
+
       describe("[duration]", function() {
         it("should be applied for a transition directly", inject(function($animateCss, $rootElement) {
           var element = jqLite('<div></div>');