Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 507c139

Browse files
NarretzNarretz
committed
fix(ngAnimate): let $animate.cancel() reject the runner promise
1 parent 41d5c90 commit 507c139

File tree

2 files changed

+312
-12
lines changed

2 files changed

+312
-12
lines changed

‎src/ng/animate.js

Lines changed: 122 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -464,13 +464,123 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
464464
* @ngdoc method
465465
* @name $animate#cancel
466466
* @kind function
467-
* @description Cancels the provided animation.
468-
*
469-
* @param {Promise} animationPromise The animation promise that is returned when an animation is started.
467+
* @description Cancels the provided animation and applies the end state of the animation.
468+
* Note that this does not cancel the underlying operation, e.g. the setting of classes or
469+
* adding the element to the DOM.
470+
*
471+
* @param {animationRunner} animationRunner An animation runner returned by an $animate function.
472+
*
473+
* @example
474+
<example module="animationExample" deps="angular-animate.js" animations="true" name="animate-cancel">
475+
<file name="app.js">
476+
angular.module('animationExample', ['ngAnimate']).component('cancelExample', {
477+
templateUrl: 'template.html',
478+
controller: function($element, $animate) {
479+
this.runner = null;
480+
481+
this.addClass = function() {
482+
this.runner = $animate.addClass($element.find('div'), 'red');
483+
var ctrl = this;
484+
this.runner.finally(function() {
485+
ctrl.runner = null;
486+
});
487+
};
488+
489+
this.removeClass = function() {
490+
this.runner = $animate.removeClass($element.find('div'), 'red');
491+
var ctrl = this;
492+
this.runner.finally(function() {
493+
ctrl.runner = null;
494+
});
495+
};
496+
497+
this.cancel = function() {
498+
$animate.cancel(this.runner);
499+
};
500+
}
501+
});
502+
</file>
503+
<file name="template.html">
504+
<p>
505+
<button id="add" ng-click="$ctrl.addClass()">Add</button>
506+
<button ng-click="$ctrl.removeClass()">Remove</button>
507+
<br>
508+
<button id="cancel" ng-click="$ctrl.cancel()" ng-disabled="!$ctrl.runner">Cancel</button>
509+
<br>
510+
<div id="target">CSS-Animated Text</div>
511+
</p>
512+
</file>
513+
<file name="index.html">
514+
<cancel-example></cancel-example>
515+
</file>
516+
<file name="style.css">
517+
.red-add, .red-remove {
518+
transition: all 4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
519+
}
520+
521+
.red,
522+
.red-add.red-add-active {
523+
color: #FF0000;
524+
font-size: 40px;
525+
}
526+
527+
.red-remove.red-remove-active {
528+
font-size: 10px;
529+
color: black;
530+
}
531+
532+
</file>
533+
<file name="protractor.js" type="protractor">
534+
535+
it('should cancel the animation', function() {
536+
//Enable animations (we disable them by default, see protractor-shared-conf.js)
537+
element(by.css('body')).allowAnimations(true);
538+
// CSS transitions use $timeout, for which Protractor by default to finish,
539+
// before executing the next action.
540+
// In this case, this would mean that the click on "Cancel" is only executed
541+
// after the transition has finished
542+
browser.waitForAngularEnabled(false);
543+
544+
var target = element(by.id('target'));
545+
546+
target.getSize().then(function(size) {
547+
expect(size.height >= 18 && size.height <= 20).toBeTruthy();
548+
});
549+
550+
element(by.buttonText('Add')).click();
551+
552+
target.getSize().then(function(size) {
553+
expect(size.height >= 19 && size.height <= 24).toBeTruthy();
554+
});
555+
556+
var classes = target.getAttribute('class');
557+
558+
expect(classes).toContain('ng-animate');
559+
expect(classes).toContain('red-add-active');
560+
expect(classes).toContain('red');
561+
562+
element(by.buttonText('Cancel')).click();
563+
564+
target.getSize().then(function(size) {
565+
expect(size.height >= 46 && size.height <= 48).toBeTruthy();
566+
});
567+
568+
classes = target.getAttribute('class');
569+
570+
expect(classes).not.toContain('ng-animate');
571+
expect(classes).not.toContain('red-add-active');
572+
expect(classes).toContain('red');
573+
574+
// Re-enable waiting for AngularJS, and disable animations again
575+
browser.waitForAngularEnabled(true);
576+
element(by.css('body')).allowAnimations(false);
577+
});
578+
</file>
579+
</example>
470580
*/
471581
cancel: function(runner) {
472-
if (runner.end) {
473-
runner.end();
582+
if (runner.cancel) {
583+
runner.cancel();
474584
}
475585
},
476586

@@ -496,7 +606,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
496606
* - **removeClass** - `{string}` - space-separated CSS classes to remove from element
497607
* - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
498608
*
499-
* @return {Promise} the animation callback promise
609+
* @return {Runner} the animation runner
500610
*/
501611
enter: function(element, parent, after, options) {
502612
parent = parent && jqLite(parent);
@@ -528,7 +638,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
528638
* - **removeClass** - `{string}` - space-separated CSS classes to remove from element
529639
* - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
530640
*
531-
* @return {Promise} the animation callback promise
641+
* @return {Runner} the animation runner
532642
*/
533643
move: function(element, parent, after, options) {
534644
parent = parent && jqLite(parent);
@@ -555,7 +665,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
555665
* - **removeClass** - `{string}` - space-separated CSS classes to remove from element
556666
* - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
557667
*
558-
* @return {Promise} the animation callback promise
668+
* @return {Runner} the animation runner
559669
*/
560670
leave: function(element, options) {
561671
return $$animateQueue.push(element, 'leave', prepareAnimateOptions(options), function() {
@@ -585,7 +695,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
585695
* - **removeClass** - `{string}` - space-separated CSS classes to remove from element
586696
* - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
587697
*
588-
* @return {Promise} the animation callback promise
698+
* @return {Runner} animationRunner the animation runner
589699
*/
590700
addClass: function(element, className, options) {
591701
options = prepareAnimateOptions(options);
@@ -615,7 +725,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
615725
* - **removeClass** - `{string}` - space-separated CSS classes to remove from element
616726
* - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
617727
*
618-
* @return {Promise} the animation callback promise
728+
* @return {Runner} the animation runner
619729
*/
620730
removeClass: function(element, className, options) {
621731
options = prepareAnimateOptions(options);
@@ -646,7 +756,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
646756
* - **removeClass** - `{string}` - space-separated CSS classes to remove from element
647757
* - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
648758
*
649-
* @return {Promise} the animation callback promise
759+
* @return {Runner} the animation runner
650760
*/
651761
setClass: function(element, add, remove, options) {
652762
options = prepareAnimateOptions(options);
@@ -693,7 +803,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
693803
* - **removeClass** - `{string}` - space-separated CSS classes to remove from element
694804
* - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
695805
*
696-
* @return {Promise} the animation callback promise
806+
* @return {Runner} the animation runner
697807
*/
698808
animate: function(element, from, to, className, options) {
699809
options = prepareAnimateOptions(options);

‎test/ngAnimate/animateSpec.js

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -790,6 +790,7 @@ describe('animations', function() {
790790
expect(element).toHaveClass('red');
791791
}));
792792

793+
793794
it('removeClass() should issue a removeClass animation with the correct DOM operation', inject(function($animate, $rootScope) {
794795
parent.append(element);
795796
element.addClass('blue');
@@ -934,6 +935,195 @@ describe('animations', function() {
934935
}));
935936
});
936937

938+
939+
describe('$animate.cancel()', function() {
940+
941+
it('should cancel enter()', inject(function($animate, $rootScope) {
942+
expect(parent.children().length).toBe(0);
943+
944+
options.foo = 'bar';
945+
var spy = jasmine.createSpy('cancelCatch');
946+
947+
var runner = $animate.enter(element, parent, null, options);
948+
949+
runner.catch(spy);
950+
951+
expect(parent.children().length).toBe(1);
952+
953+
$rootScope.$digest();
954+
955+
expect(capturedAnimation[0]).toBe(element);
956+
expect(capturedAnimation[1]).toBe('enter');
957+
expect(capturedAnimation[2].foo).toEqual(options.foo);
958+
959+
$animate.cancel(runner);
960+
// Since enter() immediately adds the element, we can only check if the
961+
// element is still at the position
962+
expect(parent.children().length).toBe(1);
963+
964+
$rootScope.$digest();
965+
966+
// Catch handler is called after digest
967+
expect(spy).toHaveBeenCalled();
968+
}));
969+
970+
971+
it('should cancel move()', inject(function($animate, $rootScope) {
972+
parent.append(element);
973+
974+
expect(parent.children().length).toBe(1);
975+
expect(parent2.children().length).toBe(0);
976+
977+
options.foo = 'bar';
978+
var spy = jasmine.createSpy('cancelCatch');
979+
980+
var runner = $animate.move(element, parent2, null, options);
981+
runner.catch(spy);
982+
983+
expect(parent.children().length).toBe(0);
984+
expect(parent2.children().length).toBe(1);
985+
986+
$rootScope.$digest();
987+
988+
expect(capturedAnimation[0]).toBe(element);
989+
expect(capturedAnimation[1]).toBe('move');
990+
expect(capturedAnimation[2].foo).toEqual(options.foo);
991+
992+
$animate.cancel(runner);
993+
// Since moves() immediately moves the element, we can only check if the
994+
// element is still at the correct position
995+
expect(parent.children().length).toBe(0);
996+
expect(parent2.children().length).toBe(1);
997+
998+
$rootScope.$digest();
999+
1000+
// Catch handler is called after digest
1001+
expect(spy).toHaveBeenCalled();
1002+
}));
1003+
1004+
1005+
it('cancel leave()', inject(function($animate, $rootScope) {
1006+
parent.append(element);
1007+
options.foo = 'bar';
1008+
var spy = jasmine.createSpy('cancelCatch');
1009+
1010+
var runner = $animate.leave(element, options);
1011+
1012+
runner.catch(spy);
1013+
$rootScope.$digest();
1014+
1015+
expect(capturedAnimation[0]).toBe(element);
1016+
expect(capturedAnimation[1]).toBe('leave');
1017+
expect(capturedAnimation[2].foo).toEqual(options.foo);
1018+
1019+
expect(element.parent().length).toBe(1);
1020+
1021+
$animate.cancel(runner);
1022+
// Animation concludes immediately
1023+
expect(element.parent().length).toBe(0);
1024+
expect(spy).not.toHaveBeenCalled();
1025+
1026+
$rootScope.$digest();
1027+
// Catch handler is called after digest
1028+
expect(spy).toHaveBeenCalled();
1029+
}));
1030+
1031+
it('should cancel addClass()', inject(function($animate, $rootScope) {
1032+
parent.append(element);
1033+
options.foo = 'bar';
1034+
var runner = $animate.addClass(element, 'red', options);
1035+
var spy = jasmine.createSpy('cancelCatch');
1036+
1037+
runner.catch(spy);
1038+
$rootScope.$digest();
1039+
1040+
expect(capturedAnimation[0]).toBe(element);
1041+
expect(capturedAnimation[1]).toBe('addClass');
1042+
expect(capturedAnimation[2].foo).toEqual(options.foo);
1043+
1044+
$animate.cancel(runner);
1045+
expect(element).toHaveClass('red');
1046+
expect(spy).not.toHaveBeenCalled();
1047+
1048+
$rootScope.$digest();
1049+
expect(spy).toHaveBeenCalled();
1050+
}));
1051+
1052+
1053+
it('should cancel setClass()', inject(function($animate, $rootScope) {
1054+
parent.append(element);
1055+
element.addClass('red');
1056+
options.foo = 'bar';
1057+
1058+
var runner = $animate.setClass(element, 'blue', 'red', options);
1059+
var spy = jasmine.createSpy('cancelCatch');
1060+
1061+
runner.catch(spy);
1062+
$rootScope.$digest();
1063+
1064+
expect(capturedAnimation[0]).toBe(element);
1065+
expect(capturedAnimation[1]).toBe('setClass');
1066+
expect(capturedAnimation[2].foo).toEqual(options.foo);
1067+
1068+
$animate.cancel(runner);
1069+
expect(element).toHaveClass('blue');
1070+
expect(element).not.toHaveClass('red');
1071+
expect(spy).not.toHaveBeenCalled();
1072+
1073+
$rootScope.$digest();
1074+
expect(spy).toHaveBeenCalled();
1075+
}));
1076+
1077+
1078+
it('should cancel removeClass()', inject(function($animate, $rootScope) {
1079+
parent.append(element);
1080+
element.addClass('red blue');
1081+
1082+
options.foo = 'bar';
1083+
var runner = $animate.removeClass(element, 'red', options);
1084+
var spy = jasmine.createSpy('cancelCatch');
1085+
1086+
runner.catch(spy);
1087+
$rootScope.$digest();
1088+
1089+
expect(capturedAnimation[0]).toBe(element);
1090+
expect(capturedAnimation[1]).toBe('removeClass');
1091+
expect(capturedAnimation[2].foo).toEqual(options.foo);
1092+
1093+
$animate.cancel(runner);
1094+
expect(element).not.toHaveClass('red');
1095+
expect(element).toHaveClass('blue');
1096+
1097+
$rootScope.$digest();
1098+
expect(spy).toHaveBeenCalled();
1099+
}));
1100+
1101+
1102+
it('should cancel animate()',
1103+
inject(function($animate, $rootScope) {
1104+
1105+
parent.append(element);
1106+
1107+
var fromStyle = { color: 'blue' };
1108+
var options = { addClass: 'red' };
1109+
1110+
var runner = $animate.animate(element, fromStyle, null, null, options);
1111+
var spy = jasmine.createSpy('cancelCatch');
1112+
1113+
runner.catch(spy);
1114+
$rootScope.$digest();
1115+
1116+
expect(capturedAnimation).toBeTruthy();
1117+
1118+
$animate.cancel(runner);
1119+
expect(element).toHaveClass('red');
1120+
1121+
$rootScope.$digest();
1122+
expect(spy).toHaveBeenCalled();
1123+
}));
1124+
});
1125+
1126+
9371127
describe('parent animations', function() {
9381128
they('should not cancel a pre-digest parent class-based animation if a child $prop animation is set to run',
9391129
['structural', 'class-based'], function(animationType) {

0 commit comments

Comments
 (0)