$animate.cancel does not have the expected behavior

Question

I m trying to use the cancel feature of angularJS's $animate : https://docs.angularjs.org/api/ngAnimate/service/$animate with the latest stable version: 1.3.2

But either I have failed to understand what it is supposed to do or it does not have the expected behavior:

I have a custom animation as such:

var animationPromise = $animate.addClass(element, 'move-items-animation', {
  from: {
     position: 'absolute',
  },
  to: {
    left : item.x + 'px',
    top : item.y + 'px'
  }
}).then(function(){
      element.classList.remove('move-items-animation');
});
$timeout(function(){
  $animate.cancel(animationPromise); //promise.$$cancelFn is not a function`
}, 300);

So a basic CSS transform. In addition to this I have the following CSS transition:

.move-items-animation-add-active{
  transition: 1s ease-in-out;
}

So first weird behavior: I get the error promise.$$cancelFn is not a function coming from https://github.com/angular/bower-angular-animate/blob/master/angular-animate.js#L1233

See fiddle: http://jsfiddle.net/q1L9ycsd/6/

So I changed slightly the code :

var animationPromise = $animate.addClass(element, 'move-items-animation', {
  from: {
     position: 'absolute',
  },
  to: {
    left : item.x + 'px',
    top : item.y + 'px'
  }
});
animationPromise.then(function(){
      // After canceling this is executed
      element.classList.remove('move-items-animation');
});
$timeout(function(){
  $animate.cancel(animationPromise); // The animation goes on
}, 300);

So now I don't have that error but the animation is not stopped but the callback from the animation is executed. Does this mean that I have to manually stop the animation there?

See fiddle: http://jsfiddle.net/524nfp0o/2/

I have also try to cancel the animation in a separate event with the same result, see fiddle: http://jsfiddle.net/0o24zw02/

So 1. Why the error in the first fiddle? 2. How to actually stop an animation?

Thanks!

Weird, my very wild guess is that this has to do with promise not having a cancel method in general and somehow angular won't treat this as $animate promise, which is the only one that has cancel. If you use the non minified version of angular, the error is promise.$$cancelFn is not a function — alou, Nov 18 '14 at 14:37

score 0 · Answer 1 · answered Oct 02 '15 at 09:44

0

It works in 1.4, I'm not seeing it documented in 1.3 $animate:

Not documented: https://code.angularjs.org/1.3.20/docs/api/ng/service/$animate

Documented: https://code.angularjs.org/1.4.0/docs/api/ng/service/$animate

I was actually having this issue with your library and your result is the only one :)

answered Oct 02 '15 at 09:44

creamcheese

2,524
3
29
55

So what works now is that there is no `promise.$$cancelFn is not a function` error anymore right? But for the rest I just tested with 1.4 and I still get strange behavior. On Google Chrome using `$animate.cancel` jumps to the end of the animation whereas on Firefox it seems to have no effect at all. – Tristan Oct 03 '15 at 11:52

$animate.cancel does not have the expected behavior

1 Answers1