Merge pull request #20 from vuejs-kr/gitlocalize-16270

docs/ko/guide/advanced/transitions.md

Author: narusas

docs/ko/guide/advanced/transitions.md

@@ -1,7 +1,8 @@
-# Transitions
+# 트랜지션(Transitions)
 
+<vueschoollink href="https://vueschool.io/lessons/route-transitions" title="Learn about route transitions"></vueschoollink>
 
-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):
+route 컴포넌트에서 트랜지션을 사용하고 탐색을 애니메이션 처리 하려면 [v-slot API](../../api/#router-view-s-v-slot) 를 사용합니다.
 
 ```html
 <router-view v-slot="{ Component }">
@@ -11,11 +12,11 @@ In order to use transitions on your route components and animate navigations, yo
 </router-view>
 ```
 
-[All transition APIs](https://v3.vuejs.org/guide/transitions-enterleave.html) work the same here.
+[Vue의 모든 transition APIs](https://v3.vuejs.org/guide/transitions-enterleave.html) 와 동일하게 동작
 
-## Per-Route Transition
+## 경로별 트랜지션(Per-Route Transition)
 
-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>`:
+위의 사용법은 모든 경로에 동일한 트랜지션을 적용합니다. 각 경로의 구성 요소가 서로 다른 트랜지션을 갖도록 하려면,  <code>&lt;transition&gt;</code> 에서 <a>메타 필드</a> 와 동적 `name` 을 결합 할 수 있습니다.
 
 ```js
 const routes = [
@@ -34,27 +35,27 @@ const routes = [
 
 ```html
 <router-view v-slot="{ Component, route }">
-  <!-- Use any custom transition and fallback to `fade` -->
+  <!-- 사용자지정 트랜지션 및 대체 트랜지션은 `fade` 사용 -->
   <transition :name="route.meta.transition || 'fade'">
     <component :is="Component" />
   </transition>
 </router-view>
 ```
 
-## Route-Based Dynamic Transition
+## 경로 기반 동적 트랜지션(Route-Based Dynamic Transition)
 
-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:
+대상 경로와 현재 경로 사이의 관계에 따라 동적으로 사용할 트랜지션을 결정할 수도 있습니다. <br>직전과 매우 유사한 예시 사용 :
 
 ```html
-<!-- use a dynamic transition name -->
+<!-- 동적 트랜지션 이름을 사용 -->
 <router-view v-slot="{ Component, route }">
   <transition :name="route.meta.transitionName">
     <component :is="Component" />
   </transition>
 </router-view>
 ```
 
-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
+경로의 깊이에 따라 `meta` 필드에 정보를 동적으로 추가하기 위해 [after navigation hook](./navigation-guards.md#global-after-hooks) 을 추가 할 수 있습니다.
 
 ```js
 router.afterEach((to, from) => {
@@ -65,4 +66,5 @@ router.afterEach((to, from) => {
 ```
 
 <!-- TODO: interactive example -->
+
 <!-- See full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). -->