Skip to content

Commit 5435808

Browse files
authored
Guide > Transitions & Animation > List Transitions の翻訳を追従 (#318)
* feat(migration): transition-group vuejs/docs@7e484c3#diff-f0734aaa5f719d77f422c90031f0c4920e8f42a072590caf81376ae08c499a13 * Update transitions-list.m vuejs/docs@fa60703#diff-f0734aaa5f719d77f422c90031f0c4920e8f42a072590caf81376ae08c499a13 * docs: translate transitions list page
1 parent 5763968 commit 5435808

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/guide/transitions-list.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
- 個別のノード
66
- 一度だけレンダリングされる複数のノード
77

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

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

15-
### リストの Enter/Leave トランジション
15+
## リストの Enter/Leave トランジション
1616

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

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

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

75-
### List Move Transitions
75+
## List Move Transitions
7676

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

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

191191
TODO: example
192192

193-
### 時間差でのリストトランジション
193+
## 時間差でのリストトランジション
194194

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

0 commit comments

Comments
 (0)