document.startViewTransition + view-transition-name으로 SPA 라우터 없이 모핑
한 줄 요약 - 상태(레이아웃)를 바꾸기만 하면 브라우저가 변경 전/후를 비교해 항목을 부드럽게 트윈합니다.
그리드-리스트 전환, 목록에서 상세로 확장 등에서 화면이 툭 끊기지 않게 하고 싶을 때.
항목에 view-transition-name 을 부여해 같은 요소로 인식시킨다.
document.startViewTransition(cb) 안에서 DOM을 바꾼다.
React는 콜백 안에서 flushSync로 동기 반영해야 정확히 캡처된다.
위치 애니메이션을 직접 안 짭니다. 이름만 같으면 브라우저가 알아서 모핑합니다.
같은 view-transition-name은 화면에 동시에 하나만 있어야 합니다.
미지원 브라우저/prefers-reduced-motion 폴백을 두세요.
갤러리 정렬/필터 재배치
목록 - 상세 전환
import type { Metadata } from "next";
import { ViewTransitionsDemo } from "./-components/ViewTransitionsDemo";
export const metadata: Metadata = {
title: "View Transitions (데모)",
description:
"document.startViewTransition()과 view-transition-name으로, 레이아웃이 바뀔 때 항목들이 부드럽게 이동/모핑하는 같은 문서 화면 전환 데모.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<ViewTransitionsDemo />
</main>
);
}