게시일: 2025년 9월 10일
범위가 지정된 뷰 전환은 DOM의 하위 트리에서 뷰 전환을 시작할 수 있는 뷰 전환 API의 제안된 확장 프로그램입니다. 이 기능은 Chrome 140부터 chrome://flags에서 '실험용 웹 플랫폼 기능' 플래그를 사용 설정하여 테스트할 수 있습니다. Google은 개발자의 의견을 적극적으로 수렴하고 있습니다.
개요
범위가 지정된 뷰 전환을 시작하려면 contain: layout가 적용된 HTMLElement에서 document.startViewTransition() 대신 element.startViewTransition()를 호출합니다.
document.querySelector('nav').startViewTransition({
callback: () => {
// … code that manipulates the contents of <nav>
},
})
그 결과 선택한 HTMLElement의 하위 트리에 범위가 지정된 뷰 전환이 발생하며, 결과 ::view-transition 유사 트리가 해당 HTMLElement에 삽입됩니다. HTMLElement는 전환 애니메이션의 컨테이너 역할을 합니다.
html
├─ head
└─ body
├─ nav
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(thing)
│ │ └─ ::view-transition-image-pair(thing)
│ │ ├─ ::view-transition-old(thing)
│ │ └─ ::view-transition-new(thing)
│ └─ ul
│ ├─ li
│ ├─ li
│ └─ li
└─ main
└─ …
범위가 지정된 전환을 사용하면 여러 뷰 전환이 동시에 실행될 수 있습니다 (전환 루트가 다른 경우). 포인터 이벤트는 전체 문서가 아닌 해당 하위 트리에서만 방지됩니다 (다시 사용 설정 가능). 또한 전환 루트 외부의 요소가 범위가 지정된 뷰 전환 위에 그려지도록 허용합니다.
범위가 지정된 뷰 전환 설명서에서 범위가 지정된 뷰 전환에 대해 자세히 알아보세요.
데모
다음 데모에서는 버튼 중 하나를 클릭하여 컨테이너 내에서 점을 이동할 수 있습니다. 문서 범위 뷰 전환 또는 요소 범위 뷰 전환을 사용하여 서로 다르게 작동하는 방식을 확인할 수 있습니다.
실시간 데모
데모 녹화
범위가 지정된 뷰 전환을 사용하면 전환 중에 점이 상위 요소에 의해 클리핑된 상태로 유지됩니다. 또한 점은 표시될 때 팝오버 위에 그려지지 않습니다.
의견을 보내 주세요
Google은 웹 개발자 커뮤니티로부터 다음 사항에 관한 의견을 듣고 싶습니다.
- 범위가 지정된 보기 전환 API의 모양입니다.
- 기능이 잘 작동하거나 예상대로 작동하지 않은 사용 사례
- 자체 참여 범위에 관한 질문을 해결하는 방법
CSS WG 문제 #9890에 댓글을 달아 의견을 공유하세요. 의견을 제출하기 전에 알려진 문제와 제약사항을 숙지하세요.
버그가 발생하면 Chromium 버그를 신고하여 알려주세요.