fix($animate): ensure class-based animations always perform a domOper…

…ation if skipped Closes #6957
angular · Apr 4, 2014 · 34d0740 · 34d0740
1 parent 4d9efa2
commit 34d0740
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
@@ -849,6 +849,7 @@ angular.module('ngAnimate', ['ng'])
         }
 
         if(skipAnimation) {
+          fireDOMOperation();
           fireBeforeCallbackAsync();
           fireAfterCallbackAsync();
           fireDoneCallbackAsync();

diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
@@ -3014,6 +3014,48 @@ describe("ngAnimate", function() {
       expect(element.hasClass('red')).toBe(true);
     }));
 
+    it("should properly add and remove CSS classes when multiple classes are applied",
+      inject(function($compile, $rootScope, $animate) {
+
+      $animate.enabled();
+
+      var exp = "{{ className ? 'before ' + className + ' after' : '' }}";
+      var element = $compile('<div class="' + exp + '"></div>')($rootScope);
+      $rootElement.append(element);
+      jqLite($document[0].body).append($rootElement);
+
+      function assertClasses(str) {
+        var className = element.attr('class');
+        str.length == 0
+            ? className.length == 0
+            : expect(className.split(/\s+/)).toEqual(str.split(' '));
+      }
+
+      $rootScope.className = '';
+      $rootScope.$digest();
+      $animate.triggerReflow();
+
+      assertClasses('');
+
+      $rootScope.className = 'one';
+      $rootScope.$digest();
+      $animate.triggerReflow();
+
+      assertClasses('before one after');
+
+      $rootScope.className = 'two';
+      $rootScope.$digest();
+      $animate.triggerReflow();
+
+      assertClasses('before after two');
+
+      $rootScope.className = '';
+      $rootScope.$digest();
+      //intentionally avoiding the triggerReflow operation
+
+      assertClasses('');
+    }));
+
     it("should avoid mixing up substring classes during add and remove operations", function() {
       var currentAnimation, currentFn;
       module(function($animateProvider) {