Skip to content

docs: update ViewTransition.md #1349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: update ViewTransition.md #1349

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
399b644
docs: update ViewTransition.md
bysxx Oct 28, 2025
c384399
Update src/content/reference/react/ViewTransition.md
bysxx Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/content/reference/react/ViewTransition.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,10 +137,11 @@ View Transition 클래스는 ViewTransition이 활성화될 때 Transition 중

#### 주의 사항 {/*caveats*/}

- By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/reference/react/Suspense#revealing-content-together-at-once).
- `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result.
- Many users may prefer not having animations on the page. React doesn't automatically disable animations for this case. We recommend that using the `@media (prefers-reduced-motion)` media query to disable animations or tone them down based on user preference. In the future, CSS libraries may have this built-in to their presets.
- Currently, `<ViewTransition>` only works in the DOM. We're working on adding support for React Native and other platforms.
- 기본적으로 `setState`는 즉시 업데이트되며 `<ViewTransition>`을 활성화하지 않습니다. [Transition](/reference/react/useTransition)으로 감싼 업데이트만 활성화됩니다. `<Suspense>`](/reference/react/Suspense)를 사용하여 Transition을 선택적으로 적용하고 [콘텐츠를 한 번에 표시](/reference/react/Suspense#revealing-content-together-at-once)할 수도 있습니다.
- `<ViewTransition>`은 이동, 크기 조정 및 크로스-페이드가 가능한 이미지를 생성합니다. React Native나 Motion에서 볼 수 있는 레이아웃 애니메이션과 달리, 내부의 모든 개별 요소가 위치를 애니메이션하는 것이 아닙니다. 이는 모든 개별 요소를 애니메이션하는 것에 비해 더 나은 성능과 더 연속적이고 부드러운 애니메이션을 제공할 수 있습니다. 하지만 독립적으로 움직여야 하는 요소들의 연속성을 잃을 수도 있습니다. 따라서 수동으로 더 많은 `<ViewTransition>` 경계를 추가해야 할 수 있습니다.
- 많은 사용자가 페이지의 애니메이션을 선호하지 않을 수 있습니다. React는 이 경우에 대해 자동으로 애니메이션을 비활성화하지 않습니다. 사용자 선호도에 따라 애니메이션을 비활성화하거나 줄이기 위해 `@media (prefers-reduced-motion)` 미디어 쿼리를 사용할 것을 권장합니다. 향후 CSS 라이브러리에서 프리셋에 이 기능이 내장될 수 있습니다.
- 현재 `<ViewTransition>`은 DOM에서만 작동합니다. React Native 및 기타 플랫폼에 대한 지원을 추가하기 위해 작업 중입니다.


---

Expand Down