角度：动画完成回调

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

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

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

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

那么有什么办法来检查动画是否完成或中断？

2017-04-15 HirenParekh

它看起来像角/动画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

来源

2017-04-15 19:39:52 karser

@HirenParekh有道理？ – karser

角度：动画完成回调

回答

相关问题