Document: startViewTransition() 메서드
Baseline
2025
*
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.
View Transitions API의 startViewTransition() 메서드는 새로운 뷰 전환을 시작하고 이를 나타내는 ViewTransition 객체를 반환합니다.
startViewTransition()이 호출되면 뷰 전환 과정에 설명된 대로 일련의 단계를 따릅니다.
구문
js
startViewTransition(callback)
매개변수
반환 값
ViewTransition 객체 인스턴스입니다.
예제
기본 사용법
기본 뷰 전환 SPA 데모에서 updateView() 함수는 View Transitions API를 지원하는 브라우저와 지원하지 않는 브라우저 모두 처리합니다. 지원 브라우저에서는 반환 값에 대한 걱정없이 startViewTransition()을 호출하여 뷰 전환 과정을 설정합니다.
js
function updateView(event) {
// 이벤트가 <a> 태그에서 실행되는지, <img> 태그에서 실행하는지에 따라 차이를 처리합니다.
let targetIdentifier;
if (event.target.firstChild === null) {
targetIdentifier = event.target;
} else {
targetIdentifier = event.target.firstChild;
}
const displayNewImage = () => {
const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
galleryImg.src = mainSrc;
galleryCaption.textContent = targetIdentifier.alt;
};
// 뷰 전환을 지원하지 않는 브라우저를 위한 폴백입니다.
if (!document.startViewTransition) {
displayNewImage();
return;
}
// 뷰 전환을 사용합니다.
const transition = document.startViewTransition(() => displayNewImage());
}
명세서
| Specification |
|---|
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |
| CSS View Transitions Module Level 2 # dom-document-startviewtransition |
브라우저 호환성
Loading…