Merge pull request #163 from mmmommm/migration-guide-transition-class-change

Migration Guide > Transition Class Change の翻訳

Author: potato4d

src/guide/migration/transition.md

@@ -1,20 +1,20 @@
 ---
-title: Transition Class Change
+title: トランジションクラスの変更
 badges:
   - breaking
 ---
 
 # {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-The `v-enter` transition class has been renamed to `v-enter-from` and the `v-leave` transition class has been renamed to `v-leave-from`.
+`v-enter` トランジションクラスは `v-enter-from` へ、そして `v-leave` トランジションクラスは `v-leave-from` へと名前が変更されました。
 
-## 2.x Syntax
+## 2.x での構文
 
-Before v2.1.8, we had two transition classes for each transition direction: initial and active states.
+v2.1.8 以前では、それぞれのトランジションの方向のために開始状態と活性状態の二つのトランジションクラスを使用していました。
 
-In v2.1.8, we introduced `v-enter-to` to address the timing gap between enter/leave transitions. However, for backward compatibility, the `v-enter` name was untouched:
+v2.1.8 では `v-enter-to` トランジションクラスを導入して、 enter/leave トランジション間のタイミングのギャップに対応しました。しかし、後方互換性のために `v-enter` という名前はそのままになってしまっています。
 
 ```css
 .v-enter,
@@ -28,11 +28,11 @@ In v2.1.8, we introduced `v-enter-to` to address the timing gap between enter/le
 }
 ```
 
-This became confusing, as _enter_ and _leave_ were broad and not using the same naming convention as their class hook counterparts.
+これは _enter_ と _leave_ が広義であり、クラスのフックと同じ命名規則を使っていないため、混乱を招いてしまっています。
 
-## 3.x Update
+## 3.x でのアップデート
 
-In order to be more explicit and legible, we have now renamed these initial state classes:
+より明示的で読みやすいように、これらの開始状態クラスの名前を変更しました。
 
 ```css
 .v-enter-from,
@@ -46,17 +46,17 @@ In order to be more explicit and legible, we have now renamed these initial stat
 }
 ```
 
-It's now much clearer what the difference between these states is.
+この変更により状態の変化が何であるかがより明確となります。
 
 ![Transition Diagram](/images/transitions.svg)
 
-The `<transition>` component's related prop names are also changed:
+`<transition>` コンポーネントの関連するプロップ名も変更されます。
 
-- `leave-class` is renamed to `leave-from-class` (can be written as `leaveFromClass` in render functions or JSX)
-- `enter-class` is renamed to `enter-from-class` (can be written as `enterFromClass` in render functions or JSX)
+- `leave-class` は `leave-from-class` に名前が変更されます。（描画関数やJSXでは `leaveFromClass` と書くことができます）
+- `enter-class` は `enter-from-class` に名前が変更されます。（描画関数やJSXでは `leaveFromClass` と書くことができます）
 
-## Migration Strategy
+## 移行戦略
 
-1. Replace instances of `.v-enter` to `.v-enter-from`
-2. Replace instances of `.v-leave` to `.v-leave-from`
-3. Replace instances of related prop names, as above.
+1. `.v-enter` のインスタンスを `.v-enter-from` に置き換えます。
+2. `.v-leave` のインスタンスを `.v-leave-from` に置き換えます。
+3. 上記のように、関連するプロップ名のインスタンスを置き換えます。