From 497abb08e2c7316336f1d018c04fdcade71d6caa Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naokie@users.noreply.github.com>
Date: Fri, 16 Apr 2021 00:49:43 +0900
Subject: [PATCH] =?UTF-8?q?Migration=20>=20Transition=20Group=20=E3=81=AE?=
 =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E3=82=92=E8=BF=BD=E5=BE=93=20(#254)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add migration guide > transition group root element

* docs: translate migration guide > transition group
---
 src/guide/migration/transition-group.md | 40 +++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/guide/migration/transition-group.md

diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
new file mode 100644
index 00000000..f3379963
--- /dev/null
+++ b/src/guide/migration/transition-group.md
@@ -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)