$animate.cancel не имеет ожидаемого поведения
Я пытаюсь использовать функцию отмены 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/
Я также попытался отменить анимацию в отдельном событии с тем же результатом, см. Fiddle: http://jsfiddle.net/0o24zw02/
Итак 1. Почему ошибка в первой скрипке? 2. Как на самом деле остановить анимацию?
Спасибо!
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
У меня действительно была эта проблема с вашей библиотекой, и ваш результат - единственный:)