View Transitions API

뷰 전환 프로그래밍 인터페이스는 크롬 111 이상에서 페이지의 서로 다른 상태 사이 또는 페이지 탐색 사이를 부드럽게 애니메이션으로 전환할 수 있게 합니다. 이전 상태와 이후 상태의 화면을 캡처한 다음 CSS 애니메이션을 사용해 두 화면 사이의 형태를 변환하므로 웹에서 앱과 같은 전환을 구현할 수 있습니다.

DOM 업데이트를 document.startViewTransition(() => updateDom())으로 감싸면 같은 페이지에서 전환을 시작할 수 있습니다. 브라우저가 이전 상태를 캡처하고 업데이트를 실행한 다음 새 상태를 캡처하여 두 상태 사이를 자동으로 교차 페이드합니다.

CSS를 전혀 작성하지 않아도 뷰 전환은 이전 페이지 상태와 새 페이지 상태 사이에서 간단한 교차 페이드를 수행합니다. 이 한 줄의 JavaScript만으로도 이전에는 복잡한 CSS 애니메이션 조정이나 전용 애니메이션 라이브러리가 필요했던 세련된 전환을 추가할 수 있습니다.

이 프로그래밍 인터페이스는 네 가지 의사 요소를 제공합니다. ::view-transition(루트 오버레이), ::view-transition-old(root)(이전 페이지 화면), ::view-transition-new(root)(새 페이지 화면), ::view-transition-image-pair(root)입니다. CSS 애니메이션으로 이 요소들을 사용자 지정할 수 있습니다.

전환 내내 유지되는 요소에 전환 이름을 지정합니다. 프로그래밍 인터페이스가 이 요소를 이전 위치와 크기에서 새 위치와 크기로 자연스럽게 변환하므로 요소 수준의 애니메이션을 자동으로 만들 수 있습니다.

의사 요소에 사용자 지정 키프레임을 적용하여 기본 교차 페이드를 재정의할 수 있습니다. 앞으로 탐색할 때는 오른쪽에서 슬라이드되어 들어오게 하고 뒤로 이동할 때는 왼쪽에서 슬라이드되어 들어오게 합니다. @keyframes를 사용하여 ::view-transition-new(root)과 ::view-transition-old(root)을 대상으로 지정하십시오.

문서 간 뷰 전환은 크롬 126 이상에서 다중 페이지 앱의 전체 페이지 탐색 사이에 애니메이션을 적용합니다. CSS에 @view-transition { navigation: auto; }를 추가하면 JavaScript 없이도 브라우저가 HTML 페이지 사이의 전환을 자동으로 처리합니다.

전정 장애가 있는 사용자는 동작이 많은 전환을 경험하지 않아야 합니다. 전환 애니메이션을 @media (prefers-reduced-motion: no-preference) 안에 넣으면 동작 감소를 선호하는 사용자의 사용자 지정 애니메이션을 비활성화하면서 기능적인 DOM 업데이트는 유지할 수 있습니다.

리액트 라우터 6.4 이상, 뷰 라우터, 아스트로는 뷰 전환을 지원합니다. 프레임워크는 경로 변경을 자동으로 startViewTransition으로 감쌉니다. 탐색 메뉴와 레이아웃 외곽 구조처럼 유지되는 요소에 전환 이름을 지정하여 경로별 전환 스타일을 구성하십시오.

뷰 전환은 페이지의 화면을 캡처하므로 복잡한 레이아웃에서는 비용이 많이 들 수 있습니다. 합성 레이어가 많고 큰 페이지에서는 캡처 중 끊김이 나타날 수 있습니다. 전환 시간을 300밀리초 미만으로 유지하고 매우 복잡한 하위 트리에는 전환을 적용하지 마십시오.

사용하기 전에 프로그래밍 인터페이스를 사용할 수 있는지 확인하십시오. if (!document.startViewTransition) { updateDom(); return; } 대체 동작에서는 애니메이션 없이 DOM을 정상적으로 업데이트합니다. 뷰 전환은 점진적 향상입니다. 뷰 전환이 없어도 앱은 작동하며, 지원되는 환경에서 사용자 경험만 개선합니다.

요소에 전환 이름을 지정하면 뷰 전환 중 어떤 기능을 사용할 수 있습니까?

뷰 전환 프로그래밍 인터페이스는 최소한의 코드로 DOM 상태나 페이지 탐색 사이에 교차 페이드와 형태 변환 애니메이션을 구현합니다. 이름이 지정된 전환 요소는 자동으로 형태가 변환되며, 사용자 지정 의사 요소 애니메이션으로 기본 교차 페이드를 바꿀 수 있습니다. prefers-reduced-motion을 존중하고 지원되지 않는 브라우저에는 점진적 향상을 사용하십시오.