我正在尝试使用 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;
}
所以第一个奇怪的行为:我收到promise.$$cancelFn is not a function
来自https://github.com/angular/bower-angular-animate/blob/master/angular-animate.js#L1233的错误
见小提琴: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. 如何真正停止动画?
谢谢!