Angular 角度：动画完成回调

我知道

（@myTrigger.done）

事件，但它每次都会触发，即使动画被中断且未完成

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

Esc

键关闭弹出窗口

我正在使用

@myTrigger.done

trigger事件检查动画是否完成。但是，如果在弹出窗口滑动时按下

Esc

键，它将发出“完成”事件

slideIn

动画的“完成”事件，并且即使幻灯片动画未完成，关闭按钮也会弹出

这是你的电话号码。您可以看到，当它打开时，如果我单击背景或按

Esc

键，则会弹出关闭按钮，如果滑动动画被中断，则不会弹出该按钮

---

那么，有没有办法检查动画是否已完成或中断

除了开始/完成之外，角度/动画似乎还有其他事件。 但是，您可以保存开始时间，然后计算经过的时间：

  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

void->active:expected:350，actual:176非活动：expected:350，actual:351
无效->活动：预期：350，实际：38非活动：预期：350，实际：353

---

现场演示

@HirenParekh有意义吗？