Skip to content

v2.2アップデートにおけるsrc/v2/guide/transitions.mdの変更の翻訳 #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 28, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/v2/guide/transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,24 @@ Vue はトランジションが終了したことを把握するためのイベ

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

### 明示的なトランジション期間の設定

> 2.2.0 からの新機能

殆どの場合、 Vue は、自動的にトランジションが終了したことを見つけ出すことが可能です。デフォルトでは、 Vue はルート要素の初めの `transitionend` もしくは `animationend` イベントを待ちます。しかし、これが常に望む形であるとは限りません。例えば、幾つかの入れ子となっている内部要素にてトランジションの遅延がある場合や、ルートのトランジション要素よりも非常に長いトランジション期間を設けている場合の、一連のトランジションのまとまりなどです。

このような場合 `<transition>` コンポーネントがもつ `duration` prop を利用することで、明示的に遷移にかかる時間(ミリ秒単位)を指定することが可能です:

``` html
<transition :duration="1000">...</transition>
```

また、活性化時と終了時の期間を、個別に指定することも可能です:

``` html
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
```

### JavaScript フック

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