File tree Expand file tree Collapse file tree 1 file changed +6
-6
lines changed Expand file tree Collapse file tree 1 file changed +6
-6
lines changed Original file line number Diff line number Diff line change 5
5
- 個別のノード
6
6
- 一度だけレンダリングされる複数のノード
7
7
8
- その上で、例えば ` v-for ` のように、全てをまとめてレンダーしたいリスト全体がある場合はどうしましょうか ?このような場合では、 ` <transition-group> ` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります:
8
+ その上で、例えば ` v-for ` のように、全てをまとめてレンダリングしたいリスト全体がある場合はどうしましょうか ?このような場合では、 ` <transition-group> ` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります:
9
9
10
- - ` <transition> ` とは異なり、デフォルトで実際の ` <span> ` 要素をレンダリングします。レンダリングされる要素は 、 ` tag ` 属性によって変更できます 。
11
- - 2つの排他の要素が切り替わっているわけではないため、[ Transition モード ] ( /guide/transitions-enterleave#transition-modes ) は利用できません。
10
+ - デフォルトでは、ラッパー要素はレンダリングされませんが 、 ` tag ` 属性でレンダリングする要素を指定することができます 。
11
+ - 2つの排他の要素が切り替わっているわけではないため、[ トランジションモード ] ( /guide/transitions-enterleave#トランジションモード ) は利用できません。
12
12
- 要素の内部では、 ** 常に** 固有の ` key ` 属性を ** 持つ必要** があります。
13
13
- CSS トランジションクラスは内部の要素に適用され、グループやコンテナには適用されません。
14
14
15
- ### リストの Enter/Leave トランジション
15
+ ## リストの Enter/Leave トランジション
16
16
17
17
早速例に飛び込んでみましょう。以前利用したものと同じ CSS クラスを利用して、 enter/leave を行います:
18
18
@@ -72,7 +72,7 @@ Vue.createApp(Demo).mount('#list-demo')
72
72
73
73
この例には一つの問題があります。item を追加や削除を行うと、その item の周りのものがスムーズに遷移せず、すぐに移動してしまいます。これは後で修正します。
74
74
75
- ### List Move Transitions
75
+ ## List Move Transitions
76
76
77
77
` <transition-group> ` コンポーネントはもう一つの機能を持っています。それは、 enter/leave にだけでなく、位置の変更もアニメーションできることです。この機能を利用するための概念として、要素が位置を変更するときに ** ` v-move ` クラス** が追加されることを知る必要があります。これはその他のクラスと同様、接頭辞はトランジションの ` name ` 属性と一致しているほか、 ` move-class ` 属性で手動でクラスを指定できます。
78
78
@@ -190,7 +190,7 @@ Vue.createApp(Demo).mount('#list-complete-demo')
190
190
191
191
TODO: example
192
192
193
- ### 時間差でのリストトランジション
193
+ ## 時間差でのリストトランジション
194
194
195
195
data 属性によって JavaScript によるトランジションと通信することで、時間差でのリストトランジションが可能となります:
196
196
You can’t perform that action at this time.
0 commit comments