Skip to content

Commit 875aa76

Browse files
potato4dkazupon
authored andcommitted
v2.2アップデートにおけるsrc/v2/guide/transitions.mdの変更の翻訳 (#227)
* 原文の取り込み * v2.2アップデートにおけるsrc/v2/guide/transitions.mdの変更の翻訳 * 「別個」表現を「個別」に修正 * 'a choreographed transition sequence'の表現を翻訳
1 parent 38f2828 commit 875aa76

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

src/v2/guide/transitions.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -387,6 +387,24 @@ Vue はトランジションが終了したことを把握するためのイベ
387387

388388
しかし、例えば、ホバーの CSS トランジション効果と Vue による CSS アニメーションのトリガの両方を持つ場合など、時には、同じ要素に両方を使うこともあるかもしれません。これらのケースでは、Vue に扱って欲しいタイプを `type` 属性で明示的に宣言するべきでしょう。この属性の値は、`animation` あるいは `transition` を取ります。
389389

390+
### 明示的なトランジション期間の設定
391+
392+
> 2.2.0 からの新機能
393+
394+
殆どの場合、 Vue は、自動的にトランジションが終了したことを見つけ出すことが可能です。デフォルトでは、 Vue はルート要素の初めの `transitionend` もしくは `animationend` イベントを待ちます。しかし、これが常に望む形であるとは限りません。例えば、幾つかの入れ子となっている内部要素にてトランジションの遅延がある場合や、ルートのトランジション要素よりも非常に長いトランジション期間を設けている場合の、一連のトランジションのまとまりなどです。
395+
396+
このような場合 `<transition>` コンポーネントがもつ `duration` prop を利用することで、明示的に遷移にかかる時間(ミリ秒単位)を指定することが可能です:
397+
398+
``` html
399+
<transition :duration="1000">...</transition>
400+
```
401+
402+
また、活性化時と終了時の期間を、個別に指定することも可能です:
403+
404+
``` html
405+
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
406+
```
407+
390408
### JavaScript フック
391409

392410
属性で JavaScript フックを定義することができます:

0 commit comments

Comments
 (0)