diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md index ad3aaa7e..a11755be 100644 --- a/src/guide/transitions-list.md +++ b/src/guide/transitions-list.md @@ -5,14 +5,14 @@ - 個別のノード - 一度だけレンダリングされる複数のノード -その上で、例えば `v-for` のように、全てをまとめてレンダーしたいリスト全体がある場合はどうしましょうか？このような場合では、 `` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります: +その上で、例えば `v-for` のように、全てをまとめてレンダリングしたいリスト全体がある場合はどうしましょうか？このような場合では、 `` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります: -- `` とは異なり、デフォルトで実際の `` 要素をレンダリングします。レンダリングされる要素は、 `tag` 属性によって変更できます。 -- 2つの排他の要素が切り替わっているわけではないため、[Transition モード](/guide/transitions-enterleave#transition-modes) は利用できません。 +- デフォルトでは、ラッパー要素はレンダリングされませんが、 `tag` 属性でレンダリングする要素を指定することができます。 +- 2つの排他の要素が切り替わっているわけではないため、[トランジションモード](/guide/transitions-enterleave#トランジションモード) は利用できません。 - 要素の内部では、 **常に** 固有の `key` 属性を **持つ必要** があります。 - CSS トランジションクラスは内部の要素に適用され、グループやコンテナには適用されません。 -### リストの Enter/Leave トランジション +## リストの Enter/Leave トランジション 早速例に飛び込んでみましょう。以前利用したものと同じ CSS クラスを利用して、 enter/leave を行います: @@ -72,7 +72,7 @@ Vue.createApp(Demo).mount('#list-demo') この例には一つの問題があります。item を追加や削除を行うと、その item の周りのものがスムーズに遷移せず、すぐに移動してしまいます。これは後で修正します。 -### List Move Transitions +## List Move Transitions `` コンポーネントはもう一つの機能を持っています。それは、 enter/leave にだけでなく、位置の変更もアニメーションできることです。この機能を利用するための概念として、要素が位置を変更するときに **`v-move` クラス** が追加されることを知る必要があります。これはその他のクラスと同様、接頭辞はトランジションの `name` 属性と一致しているほか、 `move-class` 属性で手動でクラスを指定できます。 @@ -190,7 +190,7 @@ Vue.createApp(Demo).mount('#list-complete-demo') TODO: example -### 時間差でのリストトランジション +## 時間差でのリストトランジション data 属性によって JavaScript によるトランジションと通信することで、時間差でのリストトランジションが可能となります: