diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index b254afac0..84e1a30ca 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` を取ります。 +### 明示的なトランジション期間の設定 + +> 2.2.0 からの新機能 + +殆どの場合、 Vue は、自動的にトランジションが終了したことを見つけ出すことが可能です。デフォルトでは、 Vue はルート要素の初めの `transitionend` もしくは `animationend` イベントを待ちます。しかし、これが常に望む形であるとは限りません。例えば、幾つかの入れ子となっている内部要素にてトランジションの遅延がある場合や、ルートのトランジション要素よりも非常に長いトランジション期間を設けている場合の、一連のトランジションのまとまりなどです。 + +このような場合 `` コンポーネントがもつ `duration` prop を利用することで、明示的に遷移にかかる時間(ミリ秒単位)を指定することが可能です: + +``` html +... +``` + +また、活性化時と終了時の期間を、個別に指定することも可能です: + +``` html +... +``` + ### JavaScript フック 属性で JavaScript フックを定義することができます: