角度：動畫完成回調

我知道(@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

角度：動畫完成回調

回答

相關問題