Angular:动画完全回调

时间:2017-04-15 19:03:35

标签: angular angular2-animation

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

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

我正在使用@myTrigger.done触发器事件检查动画是否完成。但是如果我在弹出窗口滑动时按Esc键,它会发出完成事件,为slideIn动画发出完成事件,即使幻灯片动画没有完成,也会弹出关闭按钮。

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

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

1 个答案:

答案 0 :(得分:1)

看起来像角度/动画doesn't除了开始/完成之外还有任何事件。 虽然,您可以保存开始时间,然后计算经过的时间:

  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