File tree Expand file tree Collapse file tree 1 file changed +40
-0
lines changed Expand file tree Collapse file tree 1 file changed +40
-0
lines changed Original file line number Diff line number Diff line change
1
+ ---
2
+ title : トランジショングループのルート要素
3
+ badges :
4
+ - breaking
5
+ ---
6
+
7
+ # {{ $frontmatter.title }} <MigrationBadges :badges =" $frontmatter.badges " />
8
+
9
+ ## 概要
10
+
11
+ ` <transition-group> ` は、デフォルトではルート要素をレンダリングしなくなりましたが、 ` tag ` プロパティでルート要素を作成することができます。
12
+
13
+ ## 2.x での構文
14
+
15
+ Vue 2 では、 ` <transition-group> ` は他のカスタムコンポーネントと同様に、ルート要素を必要として、デフォルトでは ` <span> ` となっており ` tag ` プロパティを通してカスタマイズできました。
16
+
17
+ ``` html
18
+ <transition-group tag =" ul" >
19
+ <li v-for =" item in items" :key =" item" >
20
+ {{ item }}
21
+ </li >
22
+ </transition-group >
23
+ ```
24
+
25
+ ## 3.x での構文
26
+
27
+ Vue 3 では [ Fragments] ( /guide/migration/fragments.html ) があるので、コンポーネントにはルート要素が _ 必要なくなりました_ 。そのため、 ` <transition-group> ` はデフォルトではルート要素をレンダリングしなくなりました。
28
+
29
+ - 上の例のように、 ` tag ` プロパティが Vue 2 のコードですでに定義されている場合、すべてが以前のように動作します
30
+ - もし定義されていなくて、スタイルやその他の動作が ` <span> ` ルート要素の存在に依存していた場合は、 ` <transition-group> ` に ` tag="span" ` を追加するだけです
31
+
32
+ ``` html
33
+ <transition-group tag =" span" >
34
+ <!-- -->
35
+ </transition-group >
36
+ ```
37
+
38
+ ## 参照
39
+
40
+ - [ トランジションクラスの変更] ( /guide/migration/transition.html )
You can’t perform that action at this time.
0 commit comments