$animate.cancel does not have the expected behavior

Question

$animate.cancel does not have the expected behavior

460 views Asked by Tristan At 12 September 2024 at 05:55

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!

Original Q&A