$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

У меня действительно была эта проблема с вашей библиотекой, и ваш результат - единственный:)

Другие вопросы по тегам