Skip to content

Commit

Permalink
Migration > Transition Group の翻訳を追従 (#254)
Browse files Browse the repository at this point in the history
* feat: add migration guide > transition group root element

* docs: translate migration guide > transition group
  • Loading branch information
naokie authored Apr 15, 2021
1 parent 5359268 commit 497abb0
Showing 1 changed file with 40 additions and 0 deletions.
40 changes: 40 additions & 0 deletions src/guide/migration/transition-group.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: トランジショングループのルート要素
badges:
- breaking
---

# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />

## 概要

`<transition-group>` は、デフォルトではルート要素をレンダリングしなくなりましたが、 `tag` プロパティでルート要素を作成することができます。

## 2.x での構文

Vue 2 では、 `<transition-group>` は他のカスタムコンポーネントと同様に、ルート要素を必要として、デフォルトでは `<span>` となっており `tag` プロパティを通してカスタマイズできました。

```html
<transition-group tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</transition-group>
```

## 3.x での構文

Vue 3 では [Fragments](/guide/migration/fragments.html) があるので、コンポーネントにはルート要素が _必要なくなりました_ 。そのため、 `<transition-group>` はデフォルトではルート要素をレンダリングしなくなりました。

- 上の例のように、 `tag` プロパティが Vue 2 のコードですでに定義されている場合、すべてが以前のように動作します
- もし定義されていなくて、スタイルやその他の動作が `<span>` ルート要素の存在に依存していた場合は、 `<transition-group>``tag="span"` を追加するだけです

```html
<transition-group tag="span">
<!-- -->
</transition-group>
```

## 参照

- [トランジションクラスの変更](/guide/migration/transition.html)

0 comments on commit 497abb0

Please sign in to comment.