From 29e8827d432143287b014aaacccbc8c6bbb4d835 Mon Sep 17 00:00:00 2001 From: Takuma Hanatani Date: Sun, 26 Feb 2017 20:36:33 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E5=8E=9F=E6=96=87=E3=81=AE=E5=8F=96?= =?UTF-8?q?=E3=82=8A=E8=BE=BC=E3=81=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/transitions.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index b254afac0..a9422a87e 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -387,6 +387,24 @@ Vue はトランジションが終了したことを把握するためのイベ しかし、例えば、ホバーの CSS トランジション効果と Vue による CSS アニメーションのトリガの両方を持つ場合など、時には、同じ要素に両方を使うこともあるかもしれません。これらのケースでは、Vue に扱って欲しいタイプを `type` 属性で明示的に宣言するべきでしょう。この属性の値は、`animation` あるいは `transition` を取ります。 +### Explicit Transition Durations + +> New in 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. + +In such cases you can specify an explicit transition duration (in milliseconds) using the `duration` prop on the `` component: + +``` html +... +``` + +You can also specify separate values for enter and leave durations: + +``` html +... +``` + ### JavaScript フック 属性で JavaScript フックを定義することができます: From 799a1370eab39f6fb4a1ee26caa268e2d415d7d0 Mon Sep 17 00:00:00 2001 From: Takuma Hanatani Date: Sun, 26 Feb 2017 21:01:11 +0900 Subject: [PATCH 2/4] =?UTF-8?q?v2.2=E3=82=A2=E3=83=83=E3=83=97=E3=83=87?= =?UTF-8?q?=E3=83=BC=E3=83=88=E3=81=AB=E3=81=8A=E3=81=91=E3=82=8Bsrc/v2/gu?= =?UTF-8?q?ide/transitions.md=E3=81=AE=E5=A4=89=E6=9B=B4=E3=81=AE=E7=BF=BB?= =?UTF-8?q?=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/transitions.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index a9422a87e..2c263bd3d 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -387,19 +387,19 @@ Vue はトランジションが終了したことを把握するためのイベ しかし、例えば、ホバーの CSS トランジション効果と Vue による CSS アニメーションのトリガの両方を持つ場合など、時には、同じ要素に両方を使うこともあるかもしれません。これらのケースでは、Vue に扱って欲しいタイプを `type` 属性で明示的に宣言するべきでしょう。この属性の値は、`animation` あるいは `transition` を取ります。 -### Explicit Transition Durations +### 明示的なトランジション期間の設定 -> 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` prop を利用することで、明示的に遷移にかかる時間（ミリ秒単位）を指定することが可能です: ``` html ... ``` -You can also specify separate values for enter and leave durations: +また、活性化時と終了時の期間を、別個に指定することも可能です: ``` html ... From c130342c2ccb78a2f2e04c0842c0ca3604b62b17 Mon Sep 17 00:00:00 2001 From: Takuma Hanatani Date: Sun, 26 Feb 2017 21:36:48 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E3=80=8C=E5=88=A5=E5=80=8B=E3=80=8D?= =?UTF-8?q?=E8=A1=A8=E7=8F=BE=E3=82=92=E3=80=8C=E5=80=8B=E5=88=A5=E3=80=8D?= =?UTF-8?q?=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/transitions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 2c263bd3d..14b98792d 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -399,7 +399,7 @@ Vue はトランジションが終了したことを把握するためのイベ ... ``` -また、活性化時と終了時の期間を、別個に指定することも可能です: +また、活性化時と終了時の期間を、個別に指定することも可能です: ``` html ... From d6cc63a4f7b0874c494c2595a21aeec192fc524a Mon Sep 17 00:00:00 2001 From: Takuma Hanatani Date: Tue, 28 Feb 2017 20:13:17 +0900 Subject: [PATCH 4/4] =?UTF-8?q?'a=20choreographed=20transition=20sequence'?= =?UTF-8?q?=E3=81=AE=E8=A1=A8=E7=8F=BE=E3=82=92=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/transitions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 14b98792d..84e1a30ca 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -391,7 +391,7 @@ Vue はトランジションが終了したことを把握するためのイベ > 2.2.0 からの新機能 -殆どの場合、 Vue は、自動的にトランジションが終了したことを見つけ出すことが可能です。デフォルトでは、 Vue はルート要素の初めの `transitionend` もしくは `animationend` イベントを待ちます。しかし、これが常に望む形であるとは限りません。例えば、幾つかの入れ子となっている内部要素にて、トランジションの遅延がある場合や、ルートのトランジション要素が、非常に長いトランジション期間を設けている場合などです。 +殆どの場合、 Vue は、自動的にトランジションが終了したことを見つけ出すことが可能です。デフォルトでは、 Vue はルート要素の初めの `transitionend` もしくは `animationend` イベントを待ちます。しかし、これが常に望む形であるとは限りません。例えば、幾つかの入れ子となっている内部要素にてトランジションの遅延がある場合や、ルートのトランジション要素よりも非常に長いトランジション期間を設けている場合の、一連のトランジションのまとまりなどです。 このような場合 `` コンポーネントがもつ `duration` prop を利用することで、明示的に遷移にかかる時間（ミリ秒単位）を指定することが可能です: