0

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#L1233promise.$$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. アニメーションを実際に停止するには?

ありがとう！

4

1 に答える 1

0

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

私は実際にあなたのライブラリでこの問題を抱えていましたが、あなたの結果は唯一のものです:)

于 2015-10-02T09:44:11.520 に答える