From 4e9f325d7e799568ad1860e895f25b5308bb4f11 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 15 Apr 2021 00:33:50 +0900 Subject: [PATCH 1/2] feat: add migration guide > transition group root element --- 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..86509ded --- /dev/null +++ b/src/guide/migration/transition-group.md @@ -0,0 +1,40 @@ +--- +title: Transition Group Root Element +badges: + - breaking +--- + +# {{ $frontmatter.title }} + +## Overview + +`` no longer renders a root element by default, but can still create one with the `tag` prop. + +## 2.x Syntax + +In Vue 2, ``, like other custom components, needed a root element, which by default was a `` but was customizable via the `tag` prop. + +```html + +
  • + {{ item }} +
    • +     +``` + +## 3.x Syntax + +In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `` no longer renders one by default. + +- If you already have the `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before +- If you didn't have one defined _and_ your styling or other behaviors relied on the presence of the `` root element to work properly, simply add `tag="span"` to the ``: + +```html + + + +``` + +## See also + +- [Some transition classes got a rename](/guide/migration/transition.html) From c550972ac933d5c0cf2c8f0b45fe83d9698e86b7 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 15 Apr 2021 20:52:56 +0900 Subject: [PATCH 2/2] docs: translate migration guide > transition group --- src/guide/migration/transition-group.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md index 86509ded..f3379963 100644 --- a/src/guide/migration/transition-group.md +++ b/src/guide/migration/transition-group.md @@ -1,18 +1,18 @@ --- -title: Transition Group Root Element +title: トランジショングループのルート要素 badges: - breaking --- # {{ $frontmatter.title }} -## Overview +## 概要 -`` no longer renders a root element by default, but can still create one with the `tag` prop. +`` は、デフォルトではルート要素をレンダリングしなくなりましたが、 `tag` プロパティでルート要素を作成することができます。 -## 2.x Syntax +## 2.x での構文 -In Vue 2, ``, like other custom components, needed a root element, which by default was a `` but was customizable via the `tag` prop. +Vue 2 では、 `` は他のカスタムコンポーネントと同様に、ルート要素を必要として、デフォルトでは `` となっており `tag` プロパティを通してカスタマイズできました。 ```html @@ -22,12 +22,12 @@ In Vue 2, ``, like other custom components, needed a root elem ``` -## 3.x Syntax +## 3.x での構文 -In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `` no longer renders one by default. +Vue 3 では [Fragments](/guide/migration/fragments.html) があるので、コンポーネントにはルート要素が _必要なくなりました_ 。そのため、 `` はデフォルトではルート要素をレンダリングしなくなりました。 -- If you already have the `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before -- If you didn't have one defined _and_ your styling or other behaviors relied on the presence of the `` root element to work properly, simply add `tag="span"` to the ``: +- 上の例のように、 `tag` プロパティが Vue 2 のコードですでに定義されている場合、すべてが以前のように動作します +- もし定義されていなくて、スタイルやその他の動作が `` ルート要素の存在に依存していた場合は、 `` に `tag="span"` を追加するだけです ```html @@ -35,6 +35,6 @@ In Vue 3, we have [fragment support](/guide/migration/fragments.html), so compon ``` -## See also +## 参照 -- [Some transition classes got a rename](/guide/migration/transition.html) +- [トランジションクラスの変更](/guide/migration/transition.html)