diff options
| author | Matias Niemelä | 2013-11-02 14:14:13 -0400 | 
|---|---|---|
| committer | Matias Niemelä | 2013-11-05 21:44:02 -0500 | 
| commit | e53ff431e1472c0b2d5405d267d4e403ca31087e (patch) | |
| tree | ec56bc60377f92abee1816872e96b701056c2d59 | |
| parent | 974b6d4a5b402c9911aef8adf2f3d30aae1ba8ed (diff) | |
| download | angular.js-e53ff431e1472c0b2d5405d267d4e403ca31087e.tar.bz2 | |
fix($animate): ensure the active class is not applied if cancelled during reflow
Closes #4699
| -rw-r--r-- | src/ngAnimate/animate.js | 5 | ||||
| -rw-r--r-- | test/ngAnimate/animateSpec.js | 23 | 
2 files changed, 28 insertions, 0 deletions
| diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index 64be7ba7..ad192a5b 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -898,6 +898,11 @@ angular.module('ngAnimate', ['ng'])            // This triggers a reflow which allows for the transition animation to kick in.            afterReflow(function() { +            if(!element.hasClass(className)) { +              done(); +              return; +            } +              if(timings.transitionDuration > 0) {                node.style[transitionProp + propertyKey] = '';                if(ii > 0 && stagger.transitionDelay > 0 && stagger.transitionDuration === 0) { diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 207cfedb..ec37d8c3 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -1723,6 +1723,29 @@ describe("ngAnimate", function() {      });    }); +  it("should not perform the active class animation if the animation has been cancelled before the reflow occurs", function() { +    inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { +      if(!$sniffer.transitions) return; + +      ss.addRule('.animated.ng-enter', '-webkit-transition: 2s linear all;' + +                                               'transition: 2s linear all;'); + +      var element = html($compile('<div>...</div>')($rootScope)); +      var child = $compile('<div class="animated">...</div>')($rootScope); + +      $animate.enter(child, element); +      $rootScope.$digest(); + +      expect(child.hasClass('ng-enter')).toBe(true); + +      $animate.leave(child); +      $rootScope.$digest(); + +      $timeout.flush(); +      expect(child.hasClass('ng-enter-active')).toBe(false); +    }); +  }); +  //  it("should add and remove CSS classes and perform CSS animations during the process",  //    inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {  // | 
