Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Guide > Transitions & Animation > List Transitions の翻訳を追従 #318

Merged
merged 3 commits into from
May 10, 2021
Merged

Guide > Transitions & Animation > List Transitions の翻訳を追従 #318

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
70fc59c
feat(migration): transition-group
naokie May 10, 2021
c2c1537
Update transitions-list.m
naokie May 10, 2021
32f5338
docs: translate transitions list page
naokie May 10, 2021
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
12 changes: 6 additions & 6 deletions src/guide/transitions-list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
- 個別のノード
- 一度だけレンダリングされる複数のノード

その上で、例えば `v-for` のように、全てをまとめてレンダーしたいリスト全体がある場合はどうしましょうか？このような場合では、 `<transition-group>` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります:
その上で、例えば `v-for` のように、全てをまとめてレンダリングしたいリスト全体がある場合はどうしましょうか？このような場合では、 `<transition-group>` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります:

- `<transition>` とは異なり、デフォルトで実際の `<span>` 要素をレンダリングします。レンダリングされる要素は、 `tag` 属性によって変更できます。
- 2つの排他の要素が切り替わっているわけではないため、[Transition モード](/guide/transitions-enterleave#transition-modes) は利用できません。
- デフォルトでは、ラッパー要素はレンダリングされませんが、 `tag` 属性でレンダリングする要素を指定することができます。
- 2つの排他の要素が切り替わっているわけではないため、[トランジションモード](/guide/transitions-enterleave#トランジションモード) は利用できません。
- 要素の内部では、 **常に** 固有の `key` 属性を **持つ必要** があります。
- CSS トランジションクラスは内部の要素に適用され、グループやコンテナには適用されません。

### リストの Enter/Leave トランジション
## リストの Enter/Leave トランジション

早速例に飛び込んでみましょう。以前利用したものと同じ CSS クラスを利用して、 enter/leave を行います:

Expand Down Expand Up @@ -72,7 +72,7 @@ Vue.createApp(Demo).mount('#list-demo')

この例には一つの問題があります。item を追加や削除を行うと、その item の周りのものがスムーズに遷移せず、すぐに移動してしまいます。これは後で修正します。

### List Move Transitions
## List Move Transitions

`<transition-group>` コンポーネントはもう一つの機能を持っています。それは、 enter/leave にだけでなく、位置の変更もアニメーションできることです。この機能を利用するための概念として、要素が位置を変更するときに **`v-move` クラス** が追加されることを知る必要があります。これはその他のクラスと同様、接頭辞はトランジションの `name` 属性と一致しているほか、 `move-class` 属性で手動でクラスを指定できます。

Expand Down Expand Up @@ -190,7 +190,7 @@ Vue.createApp(Demo).mount('#list-complete-demo')

TODO: example

### 時間差でのリストトランジション
## 時間差でのリストトランジション

data 属性によって JavaScript によるトランジションと通信することで、時間差でのリストトランジションが可能となります:

Expand Down