From 82656397d7c4bb41713492b6a338aaf455d3ecbe Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 22:23:13 +0900 Subject: [PATCH 01/13] chore: Mark translation memo --- src/guide/transitions-enterleave.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index ab99f7b5..6060f100 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -1,5 +1,7 @@ # Enter & Leave Transitions + + Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to: - automatically apply classes for CSS transitions and animations @@ -11,6 +13,8 @@ On this page, we'll only cover entering, leaving, and list transitions, but you ## Transitioning Single Elements/Components + + Vue provides a `transition` wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts: - Conditional rendering (using `v-if`) @@ -73,6 +77,8 @@ When an element wrapped in a `transition` component is inserted or removed, this ### Transition Classes + + There are six classes applied for enter/leave transitions. 1. `v-enter-from`: Starting state for enter. Added before element is inserted, removed one frame after element is inserted. @@ -95,6 +101,8 @@ Each of these classes will be prefixed with the name of the transition. Here the ### CSS Transitions + + One of the most common transition types uses CSS transitions. Here's an example: ```html @@ -152,6 +160,8 @@ CSS animations are applied in the same way as CSS transitions, the difference be Here's an example, omitting prefixed CSS rules for the sake of brevity: + + ```html
From e3c07b526deaad54300071a9fba6adca6f7b48bb Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 22:29:09 +0900 Subject: [PATCH 02/13] doc(ja): Translate about section in transition-enterleave page --- src/guide/transitions-enterleave.md | 32 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 6060f100..8ccdcafe 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -2,27 +2,25 @@ -Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to: +Vue は、DOM からアイテムが追加、更新、削除されたときにトランジション効果を適用するための方法を複数提供しています: -- automatically apply classes for CSS transitions and animations -- integrate 3rd-party CSS animation libraries, such as [Animate.css](https://animate.style/) -- use JavaScript to directly manipulate the DOM during transition hooks -- integrate 3rd-party JavaScript animation libraries +- 自動的に CSS トランジションやアニメーションのためのクラスを適用します。 +- [Animate.css](https://animate.style/) のようなサードパーティの CSS アニメーションライブラリと連携します。 +- トランジションフックが実行されている間、JavaScript を使って直接 DOM 操作を行います。 +- サードパーティの JavaScript アニメーションライブラリと連携します。 On this page, we'll only cover entering, leaving, and list transitions, but you can see the next section for [managing state transitions](transitions-state.html). ## Transitioning Single Elements/Components - - -Vue provides a `transition` wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts: +Vue は、`transition` ラッパーコンポーネントを提供しています。このコンポーネントは、次のコンテキストにある要素やコンポーネントに entering/leaving トランジションを追加することを可能にします: -- Conditional rendering (using `v-if`) -- Conditional display (using `v-show`) -- Dynamic components -- Component root nodes +- 条件付きの描画 (`v-if` を使用) +- 条件付きの表示 (`v-show` を利用) +- 動的コンポーネント +- コンポーネントルートノード (Component root nodes) -This is what an example looks like in action: +これは、アクションのように見える非常にシンプルな例です: ```html
@@ -67,13 +65,13 @@ Vue.createApp(Demo).mount('#demo')

-When an element wrapped in a `transition` component is inserted or removed, this is what happens: +`transition` コンポーネントにラップされた要素が挿入あるいは削除されるとき、次のことが行われます: -1. Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings. +1. Vue は、対象の要素が CSS トランジションあるいはアニメーションが適用されるか自動的に察知します。それがない場合、適切なタイミングで、CSS トランジションのクラスを追加/削除します。 -2. If the transition component provided [JavaScript hooks](#javascript-hooks), these hooks will be called at appropriate timings. +2. もし、トランジションコンポーネントが [JavaScript フック](#JavaScript-フック) を提供している場合は、適切なタイミングでそれらのフックが呼ばれます。 -3. If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue's concept of `nextTick`). +3. もし、CSS トランジション/アニメーションが検出されず、JavaScript フックも提供されない場合、挿入、削除のいずれか、あるいは両方の DOM 操作を次のフレームでただちに実行します。(注意: ここでのフレームはブラウザのアニメーションフレームを指します。 Vue の `nextTick` のコンセプトのそれとは異なるものです) ### Transition Classes From 49363fbfad088ecca0169685767ff0c2d91d8680 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 22:32:48 +0900 Subject: [PATCH 03/13] doc(ja): Translate Transitioning Single Elements/Components section in transition-enterleave page --- src/guide/transitions-enterleave.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 8ccdcafe..4d3697d9 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -1,7 +1,5 @@ # Enter & Leave Transitions - - Vue は、DOM からアイテムが追加、更新、削除されたときにトランジション効果を適用するための方法を複数提供しています: - 自動的に CSS トランジションやアニメーションのためのクラスを適用します。 @@ -75,27 +73,28 @@ Vue.createApp(Demo).mount('#demo') ### Transition Classes - + + +以下は、enter/leave トランジションのために適用される 6 つのクラスです。 -There are six classes applied for enter/leave transitions. +1. `v-enter-from `: enter の開始状態。要素が挿入される前に適用され、要素が挿入された 1 フレーム後に削除されます。 -1. `v-enter-from`: Starting state for enter. Added before element is inserted, removed one frame after element is inserted. -2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition. +2. `v-enter-active`: enter の活性状態。トランジションに入るフェーズ中に適用されます。要素が挿入される前に追加され、トランジション/アニメーションが終了すると削除されます。このクラスは、トランジションの開始に対して、期間、遅延、およびイージングカーブを定義するために使用できます。 -3. `v-enter-to`: **Only available in versions 2.1.8+.** Ending state for enter. Added one frame after element is inserted (at the same time `v-enter` is removed), removed when transition/animation finishes. +3. `v-enter-to`: **バージョン 2.1.8 以降でのみ利用可能です。** enter の終了状態。要素が挿入された 1 フレーム後に追加され (同時に `v-enter` が削除されます)、トランジション/アニメーションが終了すると削除されます。 -4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame. +4. `v-leave-from`: leave の開始状態。トランジションの終了がトリガされるとき、直ちに追加され、1フレーム後に削除されます。 -5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition. +5. `v-leave-active`: leave の活性状態。トランジションが終わるフェーズ中に適用されます。leave トランジションがトリガされるとき、直ちに追加され、トランジション/アニメーションが終了すると削除されます。このクラスは、トランジションの終了に対して、期間、遅延、およびイージングカーブを定義するために使用できます。 -6. `v-leave-to`: **Only available in versions 2.1.8+.** Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave` is removed), removed when the transition/animation finishes. +6. `v-leave-to`: **バージョン 2.1.8 以降でのみ利用可能です。** leave の終了状態。leave トランジションがトリガされた 1 フレーム後に追加され (同時に `v-leave` が削除されます)、トランジション/アニメーションが終了すると削除されます。 ![Transition Diagram](/images/transitions.svg) -Each of these classes will be prefixed with the name of the transition. Here the `v-` prefix is the default when you use a `` element with no name. If you use `` for example, then the `v-enter-from` class would instead be `my-transition-enter-from`. +各クラスは、トランジションの名前が先頭に付きます。`` 要素に名前がない場合は、デフォルトで `v-` が先頭に付きます。例えば、`` の場合は、`v-enter-from` クラスではなく、`my-transition-enter-from` となります。 -`v-enter-active` and `v-leave-active` give you the ability to specify different easing curves for enter/leave transitions, which you'll see an example of in the following section. +`v-enter-active` と `v-leave-active` は、次のセクションの例で見ることができるような、enter/leave トランジションで異なるイージングカーブの指定を可能にします。 ### CSS Transitions From 029703b363e8476098f2d6b8b5ccde68e24e1c7c Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 22:36:19 +0900 Subject: [PATCH 04/13] doc(ja): Translate CSS Animation section in transition-enterleave page --- src/guide/transitions-enterleave.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 4d3697d9..b6d90bbf 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -98,9 +98,7 @@ Vue.createApp(Demo).mount('#demo') ### CSS Transitions - - -One of the most common transition types uses CSS transitions. Here's an example: +トランジションを実現する最も一般な方法として、CSS トランジションを使います。これはシンプルな例です: ```html
@@ -127,8 +125,8 @@ Vue.createApp(Demo).mount('#demo') ``` ```css -/* Enter and leave animations can use different */ -/* durations and timing functions. */ +/* Enter および leave アニメーションは、それぞれ異なる */ +/* 間隔やタイミング関数を利用できます。 */ .slide-fade-enter-active { transition: all 0.3s ease-out; } @@ -153,11 +151,9 @@ Vue.createApp(Demo).mount('#demo') ### CSS Animations -CSS animations are applied in the same way as CSS transitions, the difference being that `v-enter-from` is not removed immediately after the element is inserted, but on an `animationend` event. - -Here's an example, omitting prefixed CSS rules for the sake of brevity: +CSS アニメーションは、CSS トランジションと同じように適用されますが、異なるのは `v-enter-from` が要素が挿入された直後に削除されないことです。しかし、`animationend` イベント時には削除されています。 - +これは簡潔にするために CSS ルールの接頭辞を除いた例です。 ```html
From c0f976960e97fc809a4035942478aee50244d091 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 22:37:25 +0900 Subject: [PATCH 05/13] doc(ja): Translate Custom Transition Classes section in transition-enterleave page --- src/guide/transitions-enterleave.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index b6d90bbf..967376cd 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -209,7 +209,7 @@ Vue.createApp(Demo).mount('#demo') ### Custom Transition Classes -You can also specify custom transition classes by providing the following attributes: +次の属性で、カスタムトランジションクラスを指定できます: - `enter-from-class` - `enter-active-class` @@ -218,9 +218,9 @@ You can also specify custom transition classes by providing the following attrib - `leave-active-class` - `leave-to-class` (2.1.8+) -These will override the conventional class names. This is especially useful when you want to combine Vue's transition system with an existing CSS animation library, such as [Animate.css](https://daneden.github.io/animate.css/). +これらは、クラス名の規約を上書きします。これは、Vue のトランジションシステムと [Animate.css](https://daneden.github.io/animate.css/) のような既存の CSS アニメーションライブラリを組み合わせたいときに特に便利です。 -Here's an example: +こちらが例となります: ```html Date: Thu, 8 Oct 2020 22:47:35 +0900 Subject: [PATCH 06/13] doc(ja): Translate JavaScript Hooks section in transition-enterleave page --- src/guide/transitions-enterleave.md | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 967376cd..cb681441 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -258,25 +258,24 @@ Vue.createApp(Demo).mount('#demo') ### Using Transitions and Animations Together -Vue needs to attach event listeners in order to know when a transition has ended. It can either be `transitionend` or `animationend`, depending on the type of CSS rules applied. If you are only using one or the other, Vue can automatically detect the correct type. - -However, in some cases you may want to have both on the same element, for example having a CSS animation triggered by Vue, along with a CSS transition effect on hover. In these cases, you will have to explicitly declare the type you want Vue to care about in a `type` attribute, with a value of either `animation` or `transition`. +Vue はトランジションが終了したことを把握するためのイベントリスナのアタッチを必要とします。イベントは、適用される CSS ルールに応じて `transitionend` か `animationend` のいずれかのタイプになります。あなたがトランジションとアニメーション、どちらか一方だけ使用する場合は、Vue は自動的に正しいタイプを判断することができます。 +しかし、例えば、ホバーの CSS トランジション効果と Vue による CSS アニメーションのトリガの両方を持つ場合など、時には、同じ要素に両方を使うこともあるかもしれません。これらのケースでは、Vue に扱って欲しいタイプを `type` 属性で明示的に宣言するべきでしょう。この属性の値は、`animation` あるいは `transition` を取ります。 ### Explicit Transition Durations TODO: validate and provide an example -> New in 2.2.0+ +> 2.2.0 から新規追加 -In most cases, Vue can automatically figure out when the transition has finished. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element. However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element. +ほとんどの場合、 Vue は、自動的にトランジションが終了したことを見つけ出すことは可能です。デフォルトでは、 Vue はルート要素の初めの `transitionend` もしくは `animationend` イベントを待ちます。しかし、これが常に望む形とは限りません。例えば、幾つかの入れ子となっている内部要素にてトランジションの遅延がある場合や、ルートのトランジション要素よりも非常に長いトランジション期間を設けている場合の、一連のトランジションのまとまりなどです。 -In such cases you can specify an explicit transition duration (in milliseconds) using the `duration` prop on the `` component: +このような場合 `` コンポーネントがもつ `duration` プロパティを利用することで、明示的に遷移にかかる時間（ミリ秒単位）を指定することが可能です: ```html ... ``` -You can also specify separate values for enter and leave durations: +また、活性化時と終了時の期間を、個別に指定することも可能です: ```html ... @@ -284,7 +283,7 @@ You can also specify separate values for enter and leave durations: ### JavaScript Hooks -You can also define JavaScript hooks in attributes: +属性によって JavaScript フックを定義することができます: ```html From a7abd4fbde7eadb992c0bfb281bc079bb81f361e Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 22:50:05 +0900 Subject: [PATCH 07/13] doc(ja): Translate Transitioning Between Elements section in transition-enterleave page --- src/guide/transitions-enterleave.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index cb681441..6a454847 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -427,7 +427,7 @@ Vue.createApp(Demo).mount('#demo') ## Transitions on Initial Render -If you also want to apply a transition on the initial render of a node, you can add the `appear` attribute: +ノードの初期描画時にトランジションを適用したい場合は、`appear` 属性を追加することができます: ```html @@ -437,7 +437,7 @@ If you also want to apply a transition on the initial render of a node, you can ## Transitioning Between Elements -We discuss [transitioning between components](#transitioning-between-components) later, but you can also transition between raw elements using `v-if`/`v-else`. One of the most common two-element transitions is between a list container and a message describing an empty list: +あとで [コンポーネント間のトランジション](#コンポーネント間のトランジション) について説明しますが、`v-if`/`v-else` を使った通常の要素同士でもトランジションできます。最も共通の2つの要素のトランジションの例として、リストコンテナとリストが空と説明するメッセージの間で行うものがあります: ```html @@ -448,7 +448,7 @@ We discuss [transitioning between components](#transitioning-between-components) ``` -It's actually possible to transition between any number of elements, either by using multiple `v-if`s or binding a single element to a dynamic property. For example: +`v-if` を複数使ったり、ひとつの要素に対して動的プロパティでバインディングを行ういずれの場合でも、複数個の要素を対象にトランジションすることが可能です。例: TODO: rewrite example and put in codepen example @@ -466,7 +466,7 @@ TODO: rewrite example and put in codepen example ``` -Which could also be written as: +このようにも書き換えることもできます: ```html From 4f63cc913cfe476286d4d317e2985e9b2352ffb2 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 23:05:24 +0900 Subject: [PATCH 08/13] doc(ja): Translate end sections in transitions-enterleave page --- src/guide/transitions-enterleave.md | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 6a454847..6d9edd4e 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -78,16 +78,10 @@ Vue.createApp(Demo).mount('#demo') 以下は、enter/leave トランジションのために適用される 6 つのクラスです。 1. `v-enter-from `: enter の開始状態。要素が挿入される前に適用され、要素が挿入された 1 フレーム後に削除されます。 - - 2. `v-enter-active`: enter の活性状態。トランジションに入るフェーズ中に適用されます。要素が挿入される前に追加され、トランジション/アニメーションが終了すると削除されます。このクラスは、トランジションの開始に対して、期間、遅延、およびイージングカーブを定義するために使用できます。 - 3. `v-enter-to`: **バージョン 2.1.8 以降でのみ利用可能です。** enter の終了状態。要素が挿入された 1 フレーム後に追加され (同時に `v-enter` が削除されます)、トランジション/アニメーションが終了すると削除されます。 - 4. `v-leave-from`: leave の開始状態。トランジションの終了がトリガされるとき、直ちに追加され、1フレーム後に削除されます。 - 5. `v-leave-active`: leave の活性状態。トランジションが終わるフェーズ中に適用されます。leave トランジションがトリガされるとき、直ちに追加され、トランジション/アニメーションが終了すると削除されます。このクラスは、トランジションの終了に対して、期間、遅延、およびイージングカーブを定義するために使用できます。 - 6. `v-leave-to`: **バージョン 2.1.8 以降でのみ利用可能です。** leave の終了状態。leave トランジションがトリガされた 1 フレーム後に追加され (同時に `v-leave` が削除されます)、トランジション/アニメーションが終了すると削除されます。 ![Transition Diagram](/images/transitions.svg) @@ -491,7 +485,7 @@ computed: { ### Transition Modes -There's still one problem though. Try clicking the button below: +まだひとつ問題が残っています。以下のボタンをクリックしてください:

See the Pen @@ -500,9 +494,9 @@ There's still one problem though. Try clicking the button below:

-As it's transitioning between the "on" button and the "off" button, both buttons are rendered - one transitioning out while the other transitions in. This is the default behavior of `` - entering and leaving happens simultaneously. +それは、"on" ボタンと "off" ボタン間でトランジションを行うとき、片方のボタンがトランジションアウトして、別の片方がトランジションインするとき、両方のボタンが描画されてしまうことです。これは、`` のデフォルトの振る舞いです - entering と leaving は同時に起きます。 -Sometimes this works great, like when transitioning items are absolutely positioned on top of each other: +時には、これで問題なく、うまく動作する場合があります。例えば、位置が絶対位置で指定されているアイテムのトランジションを行うような場合です:

See the Pen @@ -511,16 +505,19 @@ Sometimes this works great, like when transitioning items are absolutely positio

-Sometimes this isn't an option, though, or we're dealing with more complex movement where in and out states need to be coordinated, so Vue offers an extremely useful utility called **transition modes**: +ただ、そうするわけにはいかない場合や、より複雑な in と out の動きの扱いについて調整する必要がある場合に、Vue は非常に便利な **トランジションモード** というユーティリティを提供しています。 + +- `in-out`: 最初に新しい要素がトランジションして、それが完了したら、現在の要素がトランジションアウトする。 +- `out-in`: 最初に現在の要素がトランジションアウトして、それが完了したら、新しい要素がトランジションインする。 + -- `in-out`: New element transitions in first, then when complete, the current element transitions out. -- `out-in`: Current element transitions out first, then when complete, the new element transitions in. + ::: tip -You'll find very quickly that `out-in` is the state you will want most of the time :) +`out-in` がほとんどの場合に求めているものと感じるはずです。 ::: -Now let's update the transition for our on/off buttons with `out-in`: +今から、`out-in` を使って、先程の on/off ボタンのトランジションを書き換えてみましょう: ```html @@ -535,7 +532,7 @@ Now let's update the transition for our on/off buttons with `out-in`:

-With one attribute addition, we've fixed that original transition without having to add any special styling. +特別なスタイルの追加無しで、ひとつのシンプルな属性を追加するだけでオリジナルのトランジションを修正できました。 We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between eachother, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of slight-of-hand can be very useful for realistic UI microinteractions: @@ -548,7 +545,7 @@ We can use this to coordinate more expressive movement, such as a folding card, ## Transitioning Between Components -Transitioning between components is even simpler - we don't even need the `key` attribute. Instead, we wrap a [dynamic component](component-basics.html#dynamic-components): +コンポーネント間のトランジションは、 `key` 属性が必要ではないのでさらに単純です。代わりに、ただ [動的コンポーネント](components.html#動的コンポーネント) でラップするだけです: TODO: update to Vue 3 From e03aaf75931f0f2170515e38af9709bc92a3e692 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 23:09:04 +0900 Subject: [PATCH 09/13] chore: Add single lint setting to package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e770cc16..b6fdcc76 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "serve": "vuepress dev src", "build": "vuepress build src", "test": "npm run lint", - "lint": "node -e \"var shell=require('shelljs');var files=shell.find(['./src/**/*.md']).filter(function(file){return !file.endsWith('/guide/team.md')}).join(' ');if(shell.exec('textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error '+files).code!==0){shell.exit(1)};\"" + "lint": "node -e \"var shell=require('shelljs');var files=shell.find(['./src/**/*.md']).filter(function(file){return !file.endsWith('/guide/team.md')}).join(' ');if(shell.exec('textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error '+files).code!==0){shell.exit(1)};\"", + "lint:single": "textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error" }, "dependencies": { "@docsearch/css": "^1.0.0-alpha.27", From 3dc0a9be6569ef30528172b595e54f28348f9c53 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 23:12:28 +0900 Subject: [PATCH 10/13] doc(ja): Translate headings in transitions-enterleave page --- src/guide/transitions-enterleave.md | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 6d9edd4e..c72cd6df 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -1,4 +1,4 @@ -# Enter & Leave Transitions +# Enter & Leave トランジション Vue は、DOM からアイテムが追加、更新、削除されたときにトランジション効果を適用するための方法を複数提供しています: @@ -9,7 +9,7 @@ Vue は、DOM からアイテムが追加、更新、削除されたときにト On this page, we'll only cover entering, leaving, and list transitions, but you can see the next section for [managing state transitions](transitions-state.html). -## Transitioning Single Elements/Components +## 単一要素/コンポーネントのトランジション Vue は、`transition` ラッパーコンポーネントを提供しています。このコンポーネントは、次のコンテキストにある要素やコンポーネントに entering/leaving トランジションを追加することを可能にします: @@ -71,7 +71,7 @@ Vue.createApp(Demo).mount('#demo') 3. もし、CSS トランジション/アニメーションが検出されず、JavaScript フックも提供されない場合、挿入、削除のいずれか、あるいは両方の DOM 操作を次のフレームでただちに実行します。(注意: ここでのフレームはブラウザのアニメーションフレームを指します。 Vue の `nextTick` のコンセプトのそれとは異なるものです) -### Transition Classes +### トランジションクラス @@ -90,7 +90,7 @@ Vue.createApp(Demo).mount('#demo') `v-enter-active` と `v-leave-active` は、次のセクションの例で見ることができるような、enter/leave トランジションで異なるイージングカーブの指定を可能にします。 -### CSS Transitions +### CSS トランジション トランジションを実現する最も一般な方法として、CSS トランジションを使います。これはシンプルな例です: @@ -143,7 +143,7 @@ Vue.createApp(Demo).mount('#demo')

-### CSS Animations +### CSS アニメーション CSS アニメーションは、CSS トランジションと同じように適用されますが、異なるのは `v-enter-from` が要素が挿入された直後に削除されないことです。しかし、`animationend` イベント時には削除されています。 @@ -201,7 +201,7 @@ Vue.createApp(Demo).mount('#demo')

-### Custom Transition Classes +### カスタムトランジションクラス 次の属性で、カスタムトランジションクラスを指定できます: @@ -250,12 +250,13 @@ const Demo = { Vue.createApp(Demo).mount('#demo') ``` -### Using Transitions and Animations Together +### トランジションとアニメーションの併用 Vue はトランジションが終了したことを把握するためのイベントリスナのアタッチを必要とします。イベントは、適用される CSS ルールに応じて `transitionend` か `animationend` のいずれかのタイプになります。あなたがトランジションとアニメーション、どちらか一方だけ使用する場合は、Vue は自動的に正しいタイプを判断することができます。 しかし、例えば、ホバーの CSS トランジション効果と Vue による CSS アニメーションのトリガの両方を持つ場合など、時には、同じ要素に両方を使うこともあるかもしれません。これらのケースでは、Vue に扱って欲しいタイプを `type` 属性で明示的に宣言するべきでしょう。この属性の値は、`animation` あるいは `transition` を取ります。 -### Explicit Transition Durations + +### 明示的なトランジション期間の設定 TODO: validate and provide an example @@ -275,7 +276,7 @@ TODO: validate and provide an example ... ``` -### JavaScript Hooks +### JavaScript フック 属性によって JavaScript フックを定義することができます: @@ -419,7 +420,7 @@ Vue.createApp(Demo).mount('#demo')

-## Transitions on Initial Render +## 初期描画時のトランジション ノードの初期描画時にトランジションを適用したい場合は、`appear` 属性を追加することができます: @@ -429,7 +430,7 @@ Vue.createApp(Demo).mount('#demo') ``` -## Transitioning Between Elements +## 要素間のトランジション あとで [コンポーネント間のトランジション](#コンポーネント間のトランジション) について説明しますが、`v-if`/`v-else` を使った通常の要素同士でもトランジションできます。最も共通の2つの要素のトランジションの例として、リストコンテナとリストが空と説明するメッセージの間で行うものがあります: @@ -483,7 +484,7 @@ computed: { } ``` -### Transition Modes +### トランジションモード まだひとつ問題が残っています。以下のボタンをクリックしてください: @@ -543,7 +544,7 @@ We can use this to coordinate more expressive movement, such as a folding card,

-## Transitioning Between Components +## コンポーネント間のトランジション コンポーネント間のトランジションは、 `key` 属性が必要ではないのでさらに単純です。代わりに、ただ [動的コンポーネント](components.html#動的コンポーネント) でラップするだけです: From 037088d06e23809a08c9ce28713c104eb1581d84 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 23:24:59 +0900 Subject: [PATCH 11/13] doc(ja): Fix translate in transitions-enterleave page --- src/guide/transitions-enterleave.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index c72cd6df..b1c514a2 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -506,12 +506,13 @@ computed: {

-ただ、そうするわけにはいかない場合や、より複雑な in と out の動きの扱いについて調整する必要がある場合に、Vue は非常に便利な **トランジションモード** というユーティリティを提供しています。 + + +ただ、そうするわけにはいかない場合や、より複雑な in と out の動きの扱いについてコーディネートする必要がある場合に、Vue は非常に便利な **トランジションモード** というユーティリティを提供しています。 - `in-out`: 最初に新しい要素がトランジションして、それが完了したら、現在の要素がトランジションアウトする。 - `out-in`: 最初に現在の要素がトランジションアウトして、それが完了したら、新しい要素がトランジションインする。 - ::: tip @@ -535,7 +536,7 @@ computed: { 特別なスタイルの追加無しで、ひとつのシンプルな属性を追加するだけでオリジナルのトランジションを修正できました。 -We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between eachother, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of slight-of-hand can be very useful for realistic UI microinteractions: +これを利用することによって、以下のようなより表現力のある動きをコーディネートすることができます。二つの要素がお互いの間でトランジションしていますが、そのお互いの大きさが同じであり、水平方向の 0 の位置で重なるため、一つの要素の動きの流れに見えます。このような細かな調整は、よりリアルなマイクロインタラクションの表現で役立ちます:

See the Pen From 427b0359a0ce8ce09f494f156535f46e3e057313 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Thu, 8 Oct 2020 23:26:37 +0900 Subject: [PATCH 12/13] chore: Delete translation note --- src/guide/transitions-enterleave.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index b1c514a2..f1704c55 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -73,8 +73,6 @@ Vue.createApp(Demo).mount('#demo') ### トランジションクラス - - 以下は、enter/leave トランジションのために適用される 6 つのクラスです。 1. `v-enter-from `: enter の開始状態。要素が挿入される前に適用され、要素が挿入された 1 フレーム後に削除されます。 @@ -506,15 +504,11 @@ computed: {

- - ただ、そうするわけにはいかない場合や、より複雑な in と out の動きの扱いについてコーディネートする必要がある場合に、Vue は非常に便利な **トランジションモード** というユーティリティを提供しています。 - `in-out`: 最初に新しい要素がトランジションして、それが完了したら、現在の要素がトランジションアウトする。 - `out-in`: 最初に現在の要素がトランジションアウトして、それが完了したら、新しい要素がトランジションインする。 - - ::: tip `out-in` がほとんどの場合に求めているものと感じるはずです。 ::: From 8a0a02b86aedc39a023b4a3bce4c9e4d66f6a975 Mon Sep 17 00:00:00 2001 From: Takuma HANATANI Date: Sat, 10 Oct 2020 16:54:43 +0900 Subject: [PATCH 13/13] chore: Fix translation leakage --- src/guide/transitions-enterleave.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index f1704c55..d9efbb13 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -7,7 +7,7 @@ Vue は、DOM からアイテムが追加、更新、削除されたときにト - トランジションフックが実行されている間、JavaScript を使って直接 DOM 操作を行います。 - サードパーティの JavaScript アニメーションライブラリと連携します。 -On this page, we'll only cover entering, leaving, and list transitions, but you can see the next section for [managing state transitions](transitions-state.html). +このページでは、entering/leaving とリストのトランジションについてのみ取り扱いますが、次の章では、[状態のトランジション](transitions-state.html) について扱います。 ## 単一要素/コンポーネントのトランジション