각도 : 애니메이션 완료 콜백

나는 약 (@myTrigger.done) 이벤트를 알고 있지만 애니메이션이 중단되어 완료되지 않은 경우에도 매번 실행됩니다.각도 : 애니메이션 완료 콜백

팝업이 창의 오른쪽에서 슬라이드 한 다음 닫기 버튼이 튀는 팝업 구성 요소에 대해 일련의 애니메이션을 만들고 싶습니다. 팝업은 Esc 키로 닫을 수도 있습니다.

나는 애니메이션이 끝났는지 확인하기 위해 @myTrigger.done 트리거 이벤트를 사용하고 있습니다. 팝업이 슬라이딩 할 때 Esc 키를 누르면 done 이벤트가 발생하고 slideIn 애니메이션은 done 이벤트를 내고 슬라이드 애니메이션이 완료되지 않은 경우에도 닫기 버튼이 팝업됩니다.

여기에 plunker demo of my popup입니다. 당신이 볼 때 배경을 클릭하거나 Esc 키를 누르면 슬라이딩 애니메이션이 중단되면 팝업되지 않아야하는 닫기 버튼이 나타납니다.

애니메이션이 완료되었거나 중단되었는지 확인할 수있는 방법이 있습니까?

출처

2017-04-15 HirenParekh

각도/애니메이션처럼 보입니다. doesn't에는 시작/완료 이외의 이벤트가 있습니다. 있지만, 당신은 시작 시간을 저장 한 후 경과 시간 계산할 수 있습니다 :

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 말이 :이 코드 샘플이 출력을 생성

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); /// }

를? – karser

답변

관련 문제