Skip to content

Commit 497abb0

Browse files
authored
Migration > Transition Group の翻訳を追従 (#254)
* feat: add migration guide > transition group root element * docs: translate migration guide > transition group
1 parent 5359268 commit 497abb0

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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)

0 commit comments

Comments
 (0)