Skip to content

Commit 324ba0b

Browse files
authored
Merge pull request #20 from vuejs-kr/gitlocalize-16270
docs/ko/guide/advanced/transitions.md
2 parents 318b2c9 + 2e51212 commit 324ba0b

File tree

1 file changed

+12
-10
lines changed

1 file changed

+12
-10
lines changed

docs/ko/guide/advanced/transitions.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
# Transitions
1+
# 트랜지션(Transitions)
22

3+
<vueschoollink href="https://vueschool.io/lessons/route-transitions" title="Learn about route transitions"></vueschoollink>
34

4-
In order to use transitions on your route components and animate navigations, you need to use the [v-slot API](../../api/#router-view-s-v-slot):
5+
route 컴포넌트에서 트랜지션을 사용하고 탐색을 애니메이션 처리 하려면 [v-slot API](../../api/#router-view-s-v-slot) 를 사용합니다.
56

67
```html
78
<router-view v-slot="{ Component }">
@@ -11,11 +12,11 @@ In order to use transitions on your route components and animate navigations, yo
1112
</router-view>
1213
```
1314

14-
[All transition APIs](https://v3.vuejs.org/guide/transitions-enterleave.html) work the same here.
15+
[Vue의 모든 transition APIs](https://v3.vuejs.org/guide/transitions-enterleave.html) 와 동일하게 동작
1516

16-
## Per-Route Transition
17+
## 경로별 트랜지션(Per-Route Transition)
1718

18-
The above usage will apply the same transition for all routes. If you want each route's component to have different transitions, you can instead combine [meta fields](./meta.md) and a dynamic `name` on `<transition>`:
19+
위의 사용법은 모든 경로에 동일한 트랜지션을 적용합니다. 각 경로의 구성 요소가 서로 다른 트랜지션을 갖도록 하려면, <code>&lt;transition&gt;</code> 에서 <a>메타 필드</a> 와 동적 `name` 을 결합 할 수 있습니다.
1920

2021
```js
2122
const routes = [
@@ -34,27 +35,27 @@ const routes = [
3435

3536
```html
3637
<router-view v-slot="{ Component, route }">
37-
<!-- Use any custom transition and fallback to `fade` -->
38+
<!-- 사용자지정 트랜지션 및 대체 트랜지션은 `fade` 사용 -->
3839
<transition :name="route.meta.transition || 'fade'">
3940
<component :is="Component" />
4041
</transition>
4142
</router-view>
4243
```
4344

44-
## Route-Based Dynamic Transition
45+
## 경로 기반 동적 트랜지션(Route-Based Dynamic Transition)
4546

46-
It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route. Using a very similar snippet to the one just before:
47+
대상 경로와 현재 경로 사이의 관계에 따라 동적으로 사용할 트랜지션을 결정할 수도 있습니다. <br>직전과 매우 유사한 예시 사용 :
4748

4849
```html
49-
<!-- use a dynamic transition name -->
50+
<!-- 동적 트랜지션 이름을 사용 -->
5051
<router-view v-slot="{ Component, route }">
5152
<transition :name="route.meta.transitionName">
5253
<component :is="Component" />
5354
</transition>
5455
</router-view>
5556
```
5657

57-
We can add an [after navigation hook](./navigation-guards.md#global-after-hooks) to dynamically add information to the `meta` field based on the depth of the route
58+
경로의 깊이에 따라 `meta` 필드에 정보를 동적으로 추가하기 위해 [after navigation hook](./navigation-guards.md#global-after-hooks) 을 추가 할 수 있습니다.
5859

5960
```js
6061
router.afterEach((to, from) => {
@@ -65,4 +66,5 @@ router.afterEach((to, from) => {
6566
```
6667

6768
<!-- TODO: interactive example -->
69+
6870
<!-- See full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). -->

0 commit comments

Comments
 (0)