角：アニメーション完了コールバック

Question

私は約(@myTrigger.done)イベントを知っていますが、アニメーションが中断されて完了していなくても毎回起動します。

ポップアップコンポーネントは、ポップアップがウィンドウの右側からスライドし、その後に閉じるボタンがポップアップする一連のアニメーションを作成します。 ポップアップもEscキーで閉じることができます。

私は@myTrigger.doneトリガイベントを使用して、アニメーションが終了していないかどうかを確認しています。ポップアップがスライドしているときにEscキーを押すとdoneイベントが送出され、slideInアニメーションのdoneイベントが送出され、スライドアニメーションが完了していなくても閉じるボタンがポップアップします。

ここではplunker demo of my popupです。バックグラウンドをクリックするか、Escキーを押すと開いていることがわかります。スライディングアニメーションが中断された場合にポップアップしない閉じるボタンがポップアップします。

アニメーションが完了したか中断したかどうかを確認する方法はありますか？

Answer 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