From dc0cd379938030d60a13d932486c31b5a92465b8 Mon Sep 17 00:00:00 2001 From: xxziiko Date: Wed, 27 Aug 2025 00:54:10 +0900 Subject: [PATCH 1/4] docs: translate Customizing animations --- ...eact-labs-view-transitions-activity-and-more.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index c725e13f2..f85496cea 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -2483,11 +2483,13 @@ In practice, navigations should be done via "enter" and "exit" props, or by usin ### Customizing animations {/*customizing-animations*/} -By default, `` includes the default cross-fade from the browser. +기본적으로 ``은 브라우저의 기본 크로스페이드를 포함합니다. + +애니메이션을 커스터마이징하려면 [어떻게 ``이 활성화되는지](/reference/react/ViewTransition#props)에 따라 어떤 애니메이션을 사용할지 지정하는 props를 `` 컴포넌트에 제공할 수 있습니다. + +예를 들어 `default` 크로스페이드 애니메이션을 느리게 만들 수 있습니다. -To customize animations, you can provide props to the `` component to specify which animations to use, based on [how the `` activates](/reference/react/ViewTransition#props). -For example, we can slow down the `default` cross fade animation: ```js @@ -2495,7 +2497,7 @@ For example, we can slow down the `default` cross fade animation: ``` -And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-classes): +그리고 [뷰 전환 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다. ```css ::view-transition-old(.slow-fade) { @@ -2507,7 +2509,7 @@ And define `slow-fade` in CSS using [view transition classes](/reference/react/V } ``` -Now, the cross fade is slower: +이제 크로스페이드가 더 느려집니다. @@ -3686,7 +3688,7 @@ root.render( -See [Styling View Transitions](/reference/react/ViewTransition#styling-view-transitions) for a full guide on styling ``. +`` 스타일링에 대한 전체 가이드는 [View Transitions 스타일링](/reference/react/ViewTransition#styling-view-transitions)을 참조하세요. ### Shared Element Transitions {/*shared-element-transitions*/} From f8a3901d11523bfca0d38d5cace79f9e1d7b7b68 Mon Sep 17 00:00:00 2001 From: xxziiko Date: Wed, 27 Aug 2025 00:54:39 +0900 Subject: [PATCH 2/4] docs: translate Shared Element Transitions --- .../react-labs-view-transitions-activity-and-more.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index f85496cea..e38b126a4 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -3692,9 +3692,9 @@ root.render( ### Shared Element Transitions {/*shared-element-transitions*/} -When two pages include the same element, often you want to animate it from one page to the next. +두 페이지에 같은 요소가 있을 때, 종종 한 페이지에서 다음 페이지로 이어지도록 애니메이션을 주고 싶을 때가 있습니다. -To do this you can add a unique `name` to the ``: +이를 위해 ``에 고유한 name 속성을 추가할 수 있습니다. ```js @@ -3702,7 +3702,7 @@ To do this you can add a unique `name` to the ``: ``` -Now the video thumbnail animates between the two pages: +이제 비디오 썸네일이 두 페이지 사이에서 애니메이션으로 전환됩니다. @@ -4897,9 +4897,10 @@ root.render( -By default, React automatically generates a unique `name` for each element activated for a transition (see [How does `` work](/reference/react/ViewTransition#how-does-viewtransition-work)). When React sees a transition where a `` with a `name` is removed and a new `` with the same `name` is added, it will activate a shared element transition. +기본적으로 React는 전환에 활성화된 각 요소에 대해 고유한 name을 자동으로 생성합니다. ([`` 동작 방식 보기 참고](/reference/react/ViewTransition#how-does-viewtransition-work)) +React가 어떤 전환에서 특정 name을 가진 ``이 제거되고, 동일한 name을 가진 새로운 ``이 추가된 것을 감지하면 공유 요소 전환(shared element transition)을 활성화합니다. -For more info, see the docs for [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element). +자세한 내용은 [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element) 문서를 참고하세요. ### Animating based on cause {/*animating-based-on-cause*/} From e717d9127c8b074b4ece7a00b2b69186ae7f8fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Wed, 27 Aug 2025 17:33:25 +0900 Subject: [PATCH 3/4] Fix typos and formatting in ViewTransition documentation --- ...act-labs-view-transitions-activity-and-more.md | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index e38b126a4..bee98cbf0 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -2485,11 +2485,9 @@ In practice, navigations should be done via "enter" and "exit" props, or by usin 기본적으로 ``은 브라우저의 기본 크로스페이드를 포함합니다. -애니메이션을 커스터마이징하려면 [어떻게 ``이 활성화되는지](/reference/react/ViewTransition#props)에 따라 어떤 애니메이션을 사용할지 지정하는 props를 `` 컴포넌트에 제공할 수 있습니다. - -예를 들어 `default` 크로스페이드 애니메이션을 느리게 만들 수 있습니다. - +애니메이션을 커스터마이징하려면, [어떻게 ``이 활성화되는지](/reference/react/ViewTransition#props)에 따라, 어떤 애니메이션을 사용할지 지정하는 Props를 `` 컴포넌트에 제공할 수 있습니다. +예를 들어, `default` 크로스페이드 애니메이션을 느리게 만들 수 있습니다. ```js @@ -2497,7 +2495,7 @@ In practice, navigations should be done via "enter" and "exit" props, or by usin ``` -그리고 [뷰 전환 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다. +그리고 [View Transition 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다. ```css ::view-transition-old(.slow-fade) { @@ -3688,13 +3686,13 @@ root.render( -`` 스타일링에 대한 전체 가이드는 [View Transitions 스타일링](/reference/react/ViewTransition#styling-view-transitions)을 참조하세요. +`` 스타일링에 대한 전체 가이드는 [View Transition 스타일링](/reference/react/ViewTransition#styling-view-transitions)을 참조하세요. ### Shared Element Transitions {/*shared-element-transitions*/} 두 페이지에 같은 요소가 있을 때, 종종 한 페이지에서 다음 페이지로 이어지도록 애니메이션을 주고 싶을 때가 있습니다. -이를 위해 ``에 고유한 name 속성을 추가할 수 있습니다. +이를 위해 ``에 고유한 `name` 속성을 추가할 수 있습니다. ```js @@ -4897,8 +4895,7 @@ root.render( -기본적으로 React는 전환에 활성화된 각 요소에 대해 고유한 name을 자동으로 생성합니다. ([`` 동작 방식 보기 참고](/reference/react/ViewTransition#how-does-viewtransition-work)) -React가 어떤 전환에서 특정 name을 가진 ``이 제거되고, 동일한 name을 가진 새로운 ``이 추가된 것을 감지하면 공유 요소 전환(shared element transition)을 활성화합니다. +기본적으로 React는 Transition에 활성화된 각 요소에 대해 고유한 `name`을 자동으로 생성합니다. ([``이 어떻게 동작하는지 참고하세요](/reference/react/ViewTransition#how-does-viewtransition-work)). React가 어떤 Transition에서 특정 `name`을 가진 ``이 제거되고, 동일한 `name`을 가진 새로운 ``이 추가된 것을 감지하면 공유 요소 전환Shared Element Transition을 활성화합니다. 자세한 내용은 [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element) 문서를 참고하세요. From 71c1ef93f27b710f8e630781417d8e61e2feb9a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Wed, 27 Aug 2025 17:35:09 +0900 Subject: [PATCH 4/4] Fix punctuation and formatting in View Transition section --- .../2025/04/23/react-labs-view-transitions-activity-and-more.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index bee98cbf0..2819786ab 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -4895,7 +4895,7 @@ root.render( -기본적으로 React는 Transition에 활성화된 각 요소에 대해 고유한 `name`을 자동으로 생성합니다. ([``이 어떻게 동작하는지 참고하세요](/reference/react/ViewTransition#how-does-viewtransition-work)). React가 어떤 Transition에서 특정 `name`을 가진 ``이 제거되고, 동일한 `name`을 가진 새로운 ``이 추가된 것을 감지하면 공유 요소 전환Shared Element Transition을 활성화합니다. +기본적으로 React는 Transition에 활성화된 각 요소에 대해 고유한 `name`을 자동으로 생성합니다. ([``이 어떻게 동작하는지 참고하세요.](/reference/react/ViewTransition#how-does-viewtransition-work)) React가 어떤 Transition에서 특정 `name`을 가진 ``이 제거되고, 동일한 `name`을 가진 새로운 ``이 추가된 것을 감지하면 공유 요소 전환Shared Element Transition을 활성화합니다. 자세한 내용은 [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element) 문서를 참고하세요.