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: docs/ko/guide/advanced/transitions.md
+12-10Lines changed: 12 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,8 @@
1
-
# Transitions
1
+
# 트랜지션(Transitions)
2
2
3
+
<vueschoollinkhref="https://vueschool.io/lessons/route-transitions"title="Learn about route transitions"></vueschoollink>
3
4
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) 를 사용합니다.
5
6
6
7
```html
7
8
<router-viewv-slot="{ Component }">
@@ -11,11 +12,11 @@ In order to use transitions on your route components and animate navigations, yo
11
12
</router-view>
12
13
```
13
14
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)와 동일하게 동작
15
16
16
-
## Per-Route Transition
17
+
## 경로별 트랜지션(Per-Route Transition)
17
18
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><transition></code> 에서 <a>메타 필드</a> 와 동적 `name`을 결합 할 수 있습니다.
19
20
20
21
```js
21
22
constroutes= [
@@ -34,27 +35,27 @@ const routes = [
34
35
35
36
```html
36
37
<router-viewv-slot="{ Component, route }">
37
-
<!--Use any custom transition and fallback to `fade` -->
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>직전과 매우 유사한 예시 사용 :
47
48
48
49
```html
49
-
<!--use a dynamic transition name-->
50
+
<!--동적 트랜지션 이름을 사용-->
50
51
<router-viewv-slot="{ Component, route }">
51
52
<transition:name="route.meta.transitionName">
52
53
<component:is="Component" />
53
54
</transition>
54
55
</router-view>
55
56
```
56
57
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)을 추가 할 수 있습니다.
0 commit comments