Angular : 动画完成回调

Question

我知道 (@myTrigger.done) 事件，但它每次都会触发，即使动画被中断且未完成。

我想为一个弹出组件创建一系列动画，其中弹出组件从 window 的右侧滑动，然后弹出关闭按钮。弹出窗口也可以通过 Esc 键关闭。

我正在使用 @myTrigger.done 触发事件来检查动画是否完成。但是，如果我在弹出窗口滑动时按下 Esc 键，它会发出完成事件，并发出 slideIn 动画的完成事件，并且关闭按钮会弹出，即使滑动动画尚未完成。

这里是plunker demo of my popup。您可以看到，当它打开时，如果我单击背景或按 Esc 键，则会弹出关闭按钮，如果滑动动画被打断，该按钮不应弹出。

那么有什么方法可以检查动画是完成了还是中断了？

Answer 1

看起来 angular/animations doesn't 除了 start/done 之外还有任何活动。虽然，您可以保存开始时间，然后计算经过的时间：

  started: number;
  popupStateChanging(event: AnimationEvent) {
    this.started = (new Date()).getTime();
    ///
  }    
  popupStateChanged(event: AnimationEvent) {
    const now = (new Date()).getTime();
    console.log(`${event.fromState}->${event.toState}: expected: ${event.totalTime}, actual:`, now - this.started);
    ///
  }

此代码示例将产生以下输出：

void->active: expected: 350, actual: 176 <--interruped
active->inactive: expected: 350, actual: 351
void->active: expected: 350, actual: 38  <--- interrupted
active->inactive: expected: 350, actual: 353

现场演示https://plnkr.co/edit/aGhGqHcYAU5wVsQWqAuB?p=preview

Angular : 动画完成回调

Angular : Animation complete callback

angular

angular2-animation