1. @starting-style의 올바른 위치와 개념
-
@starting-style은 요소가 특정 상태로 진입할 때의 시작 지점을 정의합니다. -
이를 기본
dialog선택자가 아닌dialog[open]내부에 중첩해야 브라우저가 ‘상태 진입’ 시점을 정확히 인지하여 애니메이션을 실행합니다.
2. 레이아웃 속성의 고정 배치
-
flex,width,max-width와 같은 레이아웃 속성을dialog[open]에만 적용하면, 닫기 애니메이션 도중 해당 속성이 즉시 제거되어 다이얼로그 형태가 급격히 변형됩니다. -
모든 구조적 스타일은 기본
dialog선택자에 정의하고, 상태 선택자에서는 애니메이션 관련 속성(opacity, scale 등)만 변경하는 것이 핵심입니다.
3. 백드롭(Backdrop) 및 불연속 속성 제어
-
백드롭의
display와overlay속성은allow-discrete값을 사용하여 다이얼로그의 애니메이션 지속 시간과 동기화해야 합니다. -
이를 통해 다이얼로그가 사라지기 전에 백드롭이 먼저 증발하거나 불필요하게 남는 현상을 방지할 수 있습니다.
4. @keyframes를 이용한 비대칭 애니메이션 구현
-
CSS Transition은 상태 간의 최단 경로를 왕복하므로 진입과 퇴장 경로를 다르게 설정할 수 없습니다.
-
진입 시 슬라이드 업, 퇴장 시 스케일 다운과 같은 비대칭 효과를 위해서는 독립적인
@keyframes를 정의하고animation속성을 사용해야 하며, 페이지 로드 시 퇴장 애니메이션이 실행되지 않도록@starting-style에서 애니메이션을 무효화해야 합니다.
5. 초기 렌더링 시 시각적 플래시 방지
- 기본 상태에
visibility: hidden과pointer-events: none을 적용하여 페이지 로드 직후 다이얼로그가 잠시 나타나는 현상을 완벽히 차단합니다.