onAnimationStart, onShow

 

onAnimationStart

요소가 DOM에 붙고 보이기 시작하는 첫 프레임 직전/직후에 호출됩니다. 위치 계산, 초기 스타일 세팅, 포털(appendTo) 이동 같은 초기화 작업에 적합합니다.

 

onShow

진입 애니메이션이 완전히 끝난 뒤(레이아웃/크기 확정) 호출되는 콜백.

React에선 보통 animationend/transitionend 이벤트나 컴포넌트 라이브러리의 after-open 콜백으로 대응합니다.

스크롤 정렬, 포커스 이동, 키보드 접근성 등 사이즈 의존 작업에 적합합니다.

 

 

---

 

공통점

• 둘 다 컴포넌트의 표시(show) 과정에서 실행되는 이벤트입니다.
• 주로 Popover, Dialog, OverlayPanel, Dropdown 같은 컴포넌트에서 쓰입니다.
• UI 요소가 열릴 때 특정 동작을 수행하고 싶을 때 사용합니다

 

차이점

(onAnimationStart)

• 애니메이션이 시작될 때 호출됩니다.
• DOM이 생성되고, 화면에 표시되기 시작하지만 애니메이션이 끝나기 전입니다.
• 따라서 레이아웃 측정이나 초기 위치 설정 같은 작업에 유리합니다.

<p-overlayPanel
  #menu
  (onAnimationStart)="setMenuOverlayPosition(menuButtonRef, bottomBarRef)"
>
</p-overlayPanel>

setMenuOverlayPosition(menuButton: ElementRef, bottomBar: ElementRef) {
  // Overlay 위치 조정 (DOM이 이미 생성되었지만 애니메이션은 아직 진행 중)
}

(onShow)

• 애니메이션이 끝나고, 최종적으로 컴포넌트가 화면에 완전히 표시된 후 호출됩니다.
• 이 시점에는 컴포넌트의 크기와 위치가 모두 확정된 상태.
• 따라서 스크롤 이동, 포커스 처리, 특정 엘리먼트 중앙 정렬에 적합합니다.

<p-overlayPanel
  #episodeList
  (onShow)="scrollToCurrentEpisodeCenter()"
>
</p-overlayPanel>

scrollToCurrentEpisodeCenter() {
  // 현재 선택된 Episode를 중앙으로 스크롤
}

 

---

 

계산/배치 = onAnimationStart, 인터랙션/스크롤 = onShow

실행 순서

1. onAnimationStart → 컴포넌트가 뜨기 시작 (레이아웃 계산 가능)
2. 애니메이션 진행 중…
3. onShow → 컴포넌트가 다 뜬 상태 (스크롤/포커스 가능)

 

예제

<p-overlayPanel
  #menu
  (onAnimationStart)="setMenuOverlayPosition(menuButtonRef, bottomBarRef)"
  (onShow)="scrollToCurrentEpisodeCenter()"
  (onHide)="onEpisodeListHide()"
>
</p-overlayPanel>

• onAnimationStart → Overlay 위치 계산
• onShow → 현재 아이템 스크롤 중앙 정렬
• onHide → 상태 초기화

 

왜 둘을 나눠 써야 하나?

오버레이(예: Popover, Dialog, Drawer)는 보이지 않는 상태에서 DOM 추가 → 애니메이션 시작 → 애니메이션 종료의 과정을 거칩니다.

1. DOM 부착(attach): 실제 노드가 문서에 추가됨.
2. 애니메이션 시작(onAnimationStart): 보이기 시작. 이때 초기 위치/스타일을 세팅.
3. 레이아웃 안정화: 브라우저가 레이아웃과 페인트를 진행.
4. 애니메이션 종료(onShow에 해당): 최종 크기/위치가 확정. 이때 스크롤/포커스/ARIA 등 상호작용 준비.

차이는 요소 크기/레이아웃의 안정성입니다.

시작 시점은 내부 컨텐츠의 실제 높이/폭이 아직 변할 수 있지만, 종료 시점은 측정 결과가 신뢰 가능합니다.