File tree Expand file tree Collapse file tree 1 file changed +18
-0
lines changed Expand file tree Collapse file tree 1 file changed +18
-0
lines changed Original file line number Diff line number Diff line change @@ -387,6 +387,24 @@ Vue はトランジションが終了したことを把握するためのイベ
387
387
388
388
しかし、例えば、ホバーの CSS トランジション効果と Vue による CSS アニメーションのトリガの両方を持つ場合など、時には、同じ要素に両方を使うこともあるかもしれません。これらのケースでは、Vue に扱って欲しいタイプを ` type ` 属性で明示的に宣言するべきでしょう。この属性の値は、` animation ` あるいは ` transition ` を取ります。
389
389
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
+
390
408
### JavaScript フック
391
409
392
410
属性で JavaScript フックを定義することができます:
You can’t perform that action at this time.
0 commit comments