You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+6-9Lines changed: 6 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2485,19 +2485,17 @@ In practice, navigations should be done via "enter" and "exit" props, or by usin
2485
2485
2486
2486
기본적으로 `<ViewTransition>`은 브라우저의 기본 크로스페이드를 포함합니다.
2487
2487
2488
-
애니메이션을 커스터마이징하려면 [어떻게 `<ViewTransition>`이 활성화되는지](/reference/react/ViewTransition#props)에 따라 어떤 애니메이션을 사용할지 지정하는 props를 `<ViewTransition>` 컴포넌트에 제공할 수 있습니다.
2489
-
2490
-
예를 들어 `default` 크로스페이드 애니메이션을 느리게 만들 수 있습니다.
2491
-
2488
+
애니메이션을 커스터마이징하려면, [어떻게 `<ViewTransition>`이 활성화되는지](/reference/react/ViewTransition#props)에 따라, 어떤 애니메이션을 사용할지 지정하는 Props를 `<ViewTransition>` 컴포넌트에 제공할 수 있습니다.
2492
2489
2490
+
예를 들어, `default` 크로스페이드 애니메이션을 느리게 만들 수 있습니다.
2493
2491
2494
2492
```js
2495
2493
<ViewTransition default="slow-fade">
2496
2494
<Home />
2497
2495
</ViewTransition>
2498
2496
```
2499
2497
2500
-
그리고 [뷰 전환 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다.
2498
+
그리고 [View Transition 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다.
2501
2499
2502
2500
```css
2503
2501
::view-transition-old(.slow-fade) {
@@ -3688,13 +3686,13 @@ root.render(
3688
3686
3689
3687
</Sandpack>
3690
3688
3691
-
`<ViewTransition>` 스타일링에 대한 전체 가이드는 [View Transitions 스타일링](/reference/react/ViewTransition#styling-view-transitions)을 참조하세요.
3689
+
`<ViewTransition>` 스타일링에 대한 전체 가이드는 [View Transition 스타일링](/reference/react/ViewTransition#styling-view-transitions)을 참조하세요.
3692
3690
3693
3691
### Shared Element Transitions {/*shared-element-transitions*/}
3694
3692
3695
3693
두 페이지에 같은 요소가 있을 때, 종종 한 페이지에서 다음 페이지로 이어지도록 애니메이션을 주고 싶을 때가 있습니다.
3696
3694
3697
-
이를 위해 `<ViewTransition>`에 고유한 name 속성을 추가할 수 있습니다.
3695
+
이를 위해 `<ViewTransition>`에 고유한 `name` 속성을 추가할 수 있습니다.
3698
3696
3699
3697
```js
3700
3698
<ViewTransition name={`video-${video.id}`}>
@@ -4897,8 +4895,7 @@ root.render(
4897
4895
4898
4896
</Sandpack>
4899
4897
4900
-
기본적으로 React는 전환에 활성화된 각 요소에 대해 고유한 name을 자동으로 생성합니다. ([`<ViewTransition>` 동작 방식 보기 참고](/reference/react/ViewTransition#how-does-viewtransition-work))
4901
-
React가 어떤 전환에서 특정 name을 가진 `<ViewTransition>`이 제거되고, 동일한 name을 가진 새로운 `<ViewTransition>`이 추가된 것을 감지하면 공유 요소 전환(shared element transition)을 활성화합니다.
4898
+
기본적으로 React는 Transition에 활성화된 각 요소에 대해 고유한 `name`을 자동으로 생성합니다. ([`<ViewTransition>`이 어떻게 동작하는지 참고하세요](/reference/react/ViewTransition#how-does-viewtransition-work)). React가 어떤 Transition에서 특정 `name`을 가진 `<ViewTransition>`이 제거되고, 동일한 `name`을 가진 새로운 `<ViewTransition>`이 추가된 것을 감지하면 공유 요소 전환<sup>Shared Element Transition</sup>을 활성화합니다.
4902
4899
4903
4900
자세한 내용은 [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element) 문서를 참고하세요.
0 commit comments