fix(ngAnimate): let $animate.cancel() reject the runner promise

Author: Narretz

src/ng/animate.js

@@ -464,13 +464,150 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        * @ngdoc method
        * @name $animate#cancel
        * @kind function
-       * @description Cancels the provided animation.
-       *
-       * @param {Promise} animationPromise The animation promise that is returned when an animation is started.
+       * @description Cancels the provided animation and applies the end state of the animation.
+       * Note that this does not cancel the underlying operation, e.g. the setting of classes or
+       * adding the element to the DOM.
+       *
+       * @param {animationRunner} animationRunner An animation runner returned by an $animate function.
+       *
+       * @example
+        <example module="animationExample" deps="angular-animate.js" animations="true" name="animate-cancel">
+          <file name="app.js">
+            angular.module('animationExample', ['ngAnimate']).component('cancelExample', {
+              templateUrl: 'template.html',
+              controller: function($element, $animate) {
+                this.runner = null;
+
+                this.addClass = function() {
+                  this.runner = $animate.addClass($element.find('span'), 'red');
+                  var ctrl = this;
+                  this.runner.finally(function() {
+                    ctrl.runner = null;
+                  });
+                };
+
+                this.removeClass = function() {
+                  this.runner = $animate.removeClass($element.find('span'), 'red');
+                  var ctrl = this;
+                  this.runner.finally(function() {
+                    ctrl.runner = null;
+                  });
+                };
+
+                this.cancel = function() {
+                  $animate.cancel(this.runner);
+                };
+
+                this.enter = function() {
+                  var ctrl = this;
+
+                  this.runner = $animate.enter(this.element, null, $element.find('span'));
+                  this.runner.catch(function(e) {
+                    console.log('catch', e);
+                    ctrl.cancelCount++;
+                  });
+                };
+
+                this.leave = function() {
+                  var ctrl = this;
+
+                  this.runner = $animate.leave(this.element);
+                  this.runner.catch(function(e) {
+                    ctrl.cancelCount++;
+                  });
+                };
+              }
+            });
+          </file>
+          <file name="template.html">
+            <p>
+              <button id="add" ng-click="$ctrl.addClass()">Add</button>
+              <button ng-click="$ctrl.removeClass()">Remove</button>
+              <button ng-click="$ctrl.enter()">Enter</button>
+              <button ng-click="$ctrl.leave()">Leave</button>
+              <br>
+              <button id="cancel" ng-click="$ctrl.cancel()" ng-disabled="!$ctrl.runner">Cancel</button>
+              <br>
+              <span id="target">CSS-Animated Text</span>
+            </p>
+          </file>
+          <file name="index.html">
+            <cancel-example></cancel-example>
+          </file>
+          <file name="style.css">
+            .red-add, .red-remove {
+              transition: all 4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
+            }
+
+            .red,
+            .red-add.red-add-active {
+              color: #FF0000;
+              font-size: 3em;
+            }
+
+            .red-remove.red-remove-active {
+              font-size: 1em;
+              color: black;
+            }
+
+            .animate-if {
+              background:white;
+              border:1px solid black;
+              padding:10px;
+            }
+
+            .animate-if.ng-enter, .animate-if.ng-leave {
+              transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s;
+            }
+
+            .animate-if.ng-enter,
+            .animate-if.ng-leave.ng-leave-active {
+              opacity:0;
+              background: red;
+            }
+
+            .animate-if.ng-leave,
+            .animate-if.ng-enter.ng-enter-active {
+              opacity:1;
+              background: white;
+            }
+
+          </file>
+          <file name="protractor.js" type="protractor">
+
+            it('should cancel the animation', function() {
+              //Enable animations (we disable them by default, see protractor-shared-conf.js)
+              element(by.css('body')).allowAnimations(true);
+              // CSS transitions use $timeout, for which Protractor by default to finish,
+              // before executing the next action.
+              // In this case, this would mean that the click on "Cancel" is only executed
+              // after the transition has finished
+              browser.waitForAngularEnabled(false);
+
+              var target = element(by.id('target'));
+
+              element(by.buttonText('Add')).click();
+
+              var classes = target.getAttribute('class');
+
+              expect(classes).toContain('ng-animate');
+              expect(classes).toContain('red-add-active');
+              expect(classes).toContain('red');
+
+              element(by.buttonText('Cancel')).click();
+
+              classes = target.getAttribute('class');
+
+              expect(classes).not.toContain('ng-animate');
+              expect(classes).not.toContain('red-add-active');
+              expect(classes).toContain('red');
+            });
+          </file>
+        </example>
        */
       cancel: function(runner) {
-        if (runner.end) {
-          runner.end();
+        if (runner.cancel) {
+          runner.cancel();
         }
       },
 
@@ -496,7 +633,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        *   - **removeClass** - `{string}` - space-separated CSS classes to remove from element
        *   - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
        *
-       * @return {Promise} the animation callback promise
+       * @return {Runner} the animation runner
        */
       enter: function(element, parent, after, options) {
         parent = parent && jqLite(parent);
@@ -528,7 +665,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        *   - **removeClass** - `{string}` - space-separated CSS classes to remove from element
        *   - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
        *
-       * @return {Promise} the animation callback promise
+       * @return {Runner} the animation runner
        */
       move: function(element, parent, after, options) {
         parent = parent && jqLite(parent);
@@ -555,7 +692,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        *   - **removeClass** - `{string}` - space-separated CSS classes to remove from element
        *   - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
        *
-       * @return {Promise} the animation callback promise
+       * @return {Runner} the animation runner
        */
       leave: function(element, options) {
         return $$animateQueue.push(element, 'leave', prepareAnimateOptions(options), function() {
@@ -585,7 +722,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        *   - **removeClass** - `{string}` - space-separated CSS classes to remove from element
        *   - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
        *
-       * @return {Promise} the animation callback promise
+       * @return {Runner} animationRunner the animation runner
        */
       addClass: function(element, className, options) {
         options = prepareAnimateOptions(options);
@@ -615,7 +752,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        *   - **removeClass** - `{string}` - space-separated CSS classes to remove from element
        *   - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
        *
-       * @return {Promise} the animation callback promise
+       * @return {Runner} the animation runner
        */
       removeClass: function(element, className, options) {
         options = prepareAnimateOptions(options);
@@ -646,7 +783,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        *   - **removeClass** - `{string}` - space-separated CSS classes to remove from element
        *   - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
        *
-       * @return {Promise} the animation callback promise
+       * @return {Runner} the animation runner
        */
       setClass: function(element, add, remove, options) {
         options = prepareAnimateOptions(options);
@@ -693,7 +830,7 @@ var $AnimateProvider = ['$provide', /** @this */ function($provide) {
        *   - **removeClass** - `{string}` - space-separated CSS classes to remove from element
        *   - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
        *
-       * @return {Promise} the animation callback promise
+       * @return {Runner} the animation runner
        */
       animate: function(element, from, to, className, options) {
         options = prepareAnimateOptions(options);

src/ngAnimate/animateCss.js

@@ -722,8 +722,8 @@ var $AnimateCssProvider = ['$animateProvider', /** @this */ function($animatePro
         }
         $$jqLite.removeClass(element, activeClasses);
 
-        blockKeyframeAnimations(node, false);
-        blockTransitions(node, false);
+        // blockKeyframeAnimations(node, false);
+        // blockTransitions(node, false);
 
         forEach(temporaryStyles, function(entry) {
           // There is only one way to remove inline style properties entirely from elements.