From 68b75e2f4c13ac793bde0bc71991cd436f65010d Mon Sep 17 00:00:00 2001 From: mmmommm Date: Mon, 9 Nov 2020 09:36:43 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Migration=20Guide=20>=20Transition=20Class?= =?UTF-8?q?=20Change=20=E3=81=AE=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/migration/transition.md | 34 +++++++++++++++---------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/guide/migration/transition.md b/src/guide/migration/transition.md index 89643f1b..ac9c4449 100644 --- a/src/guide/migration/transition.md +++ b/src/guide/migration/transition.md @@ -1,20 +1,20 @@ --- -title: Transition Class Change +title: トランジションクラスの変更 badges: - breaking --- # {{ $frontmatter.title }} -## 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 `` component's related prop names are also changed: +`` コンポーネントの関連するプロップ名も変更されます。 -- `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. \ No newline at end of file +1. `.v-enter` のインスタンスを `.v-enter-from` に置き換えます。 +2. `.v-leave` のインスタンスを `.v-leave-from` に置き換えます。 +3. 上記のように、関連するプロップ名のインスタンスを置き換えます。 \ No newline at end of file From d1733eed22204d5c63c5bdaf6d86c6c468c6d0e4 Mon Sep 17 00:00:00 2001 From: mmmommm Date: Wed, 11 Nov 2020 04:57:49 +0900 Subject: [PATCH 2/2] chore: fix transration --- src/guide/migration/transition.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/guide/migration/transition.md b/src/guide/migration/transition.md index ac9c4449..243dab04 100644 --- a/src/guide/migration/transition.md +++ b/src/guide/migration/transition.md @@ -10,11 +10,11 @@ badges: `v-enter` トランジションクラスは `v-enter-from` へ、そして `v-leave` トランジションクラスは `v-leave-from` へと名前が変更されました。 -## 2.x 構文 +## 2.x での構文 v2.1.8 以前では、それぞれのトランジションの方向のために開始状態と活性状態の二つのトランジションクラスを使用していました。 -v2.1.8 では `v-enter-to` トランジションクラスを導入して、 enter/leave トランジション間のタイミングのギャップに対応しました。しかし、下位互換性のために `v-enter` という名前はそのままになってしまっています。 +v2.1.8 では `v-enter-to` トランジションクラスを導入して、 enter/leave トランジション間のタイミングのギャップに対応しました。しかし、後方互換性のために `v-enter` という名前はそのままになってしまっています。 ```css .v-enter, @@ -30,7 +30,7 @@ v2.1.8 では `v-enter-to` トランジションクラスを導入して、 ente これは _enter_ と _leave_ が広義であり、クラスのフックと同じ命名規則を使っていないため、混乱を招いてしまっています。 -## 3.x アップデート +## 3.x でのアップデート より明示的で読みやすいように、これらの開始状態クラスの名前を変更しました。 @@ -52,8 +52,8 @@ v2.1.8 では `v-enter-to` トランジションクラスを導入して、 ente `` コンポーネントの関連するプロップ名も変更されます。 -- `leave-class` は `leave-from-class` に名前が変更されます。（レンダー関数やJSXでは `leaveFromClass` と書くことができます） -- `enter-class` は `enter-from-class` に名前が変更されます。（レンダー関数やJSXでは `leaveFromClass` と書くことができます） +- `leave-class` は `leave-from-class` に名前が変更されます。（描画関数やJSXでは `leaveFromClass` と書くことができます） +- `enter-class` は `enter-from-class` に名前が変更されます。（描画関数やJSXでは `leaveFromClass` と書くことができます） ## 移行戦略