Question

我正在尝试使用angularJS的$animate：https://docs.angularjs.org/api/ngAnimate/service/$animate的取消功能和最新的稳定版本：1.3.2

但要么我不理解它应该做什么，要么它没有预期的行为：

我有一个自定义动画：

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);

这是一个基本的CSS转换。除此之外，我还有以下CSS过渡：

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

所以第一个奇怪的行为：我收到来自https://github.com/angular/bower-angular-animate/blob/master/angular-animate.js#L1233

的错误promise.$$cancelFn is not a function

请参阅小提琴：http://jsfiddle.net/q1L9ycsd/6/

所以我略微改变了代码：

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);

所以现在我没有那个错误但是动画没有停止但是动画的回调被执行了。这是否意味着我必须在那里手动停止动画？

请参阅小提琴：http://jsfiddle.net/524nfp0o/2/

我也尝试在具有相同结果的单独事件中取消动画，请参阅小提琴：http://jsfiddle.net/0o24zw02/

所以 1.为什么第一个小提琴出错？ 2.如何实际停止动画？

谢谢！

Answer 1

它适用于1.4，我没有在1.3 $ animate中记录它：

未记录：https://code.angularjs.org/1.3.20/docs/api/ng/service/ $ animate

记录：https://code.angularjs.org/1.4.0/docs/api/ng/service/ $ animate

我的库实际上遇到了这个问题，结果是唯一一个：）

$ animate.cancel没有预期的行为

1 个答案: