我知道(@myTrigger.done)事件，但即使动画被中断且未完成，它也会每次触发。
我想为一个弹出组件创建一系列动画，其中弹出窗口从窗口右侧滑动，然后弹出关闭按钮。弹出窗口也可以通过Esc按键关闭。
我正在使用@myTrigger.done触发事件来检查动画是否完成。但是如果我Esc在弹出窗口滑动时按下键，它会发出完成事件，为slideIn动画发出完成事件，即使幻灯片动画未完成，关闭按钮也会弹出。
这是我的弹出窗口的plunker 演示。您可以看到，当它打开时，如果我单击背景或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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句