From 70fc59c9afc525c524effa71cc486d96eb32a286 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 10 May 2021 19:07:58 +0900 Subject: [PATCH 1/3] feat(migration): transition-group https://github.com/vuejs/docs-next/commit/7e484c3b6c8b758aa717e1a2b123bb07a6de0283#diff-f0734aaa5f719d77f422c90031f0c4920e8f42a072590caf81376ae08c499a13 --- src/guide/transitions-list.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md index ad3aaa7e..9942a36c 100644 --- a/src/guide/transitions-list.md +++ b/src/guide/transitions-list.md @@ -7,7 +7,7 @@ その上で、例えば `v-for` のように、全てをまとめてレンダーしたいリスト全体がある場合はどうしましょうか？このような場合では、 `` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります: -- `` とは異なり、デフォルトで実際の `` 要素をレンダリングします。レンダリングされる要素は、 `tag` 属性によって変更できます。 +- By default, it doesn't render a wrapper element, but you can specify an element to be rendered with the `tag` attribute. - 2つの排他の要素が切り替わっているわけではないため、[Transition モード](/guide/transitions-enterleave#transition-modes) は利用できません。 - 要素の内部では、 **常に** 固有の `key` 属性を **持つ必要** があります。 - CSS トランジションクラスは内部の要素に適用され、グループやコンテナには適用されません。 From c2c15379246bc4236f446c4840ade80f9e692b8f Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 10 May 2021 19:09:11 +0900 Subject: [PATCH 2/3] Update transitions-list.m https://github.com/vuejs/docs-next/commit/fa6070308f2c53ec4fbe509c4a9818e385f052b2#diff-f0734aaa5f719d77f422c90031f0c4920e8f42a072590caf81376ae08c499a13 --- src/guide/transitions-list.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md index 9942a36c..976d4a7d 100644 --- a/src/guide/transitions-list.md +++ b/src/guide/transitions-list.md @@ -12,7 +12,7 @@ - 要素の内部では、 **常に** 固有の `key` 属性を **持つ必要** があります。 - CSS トランジションクラスは内部の要素に適用され、グループやコンテナには適用されません。 -### リストの Enter/Leave トランジション +## リストの Enter/Leave トランジション 早速例に飛び込んでみましょう。以前利用したものと同じ CSS クラスを利用して、 enter/leave を行います: @@ -72,7 +72,7 @@ Vue.createApp(Demo).mount('#list-demo') この例には一つの問題があります。item を追加や削除を行うと、その item の周りのものがスムーズに遷移せず、すぐに移動してしまいます。これは後で修正します。 -### List Move Transitions +## List Move Transitions `` コンポーネントはもう一つの機能を持っています。それは、 enter/leave にだけでなく、位置の変更もアニメーションできることです。この機能を利用するための概念として、要素が位置を変更するときに **`v-move` クラス** が追加されることを知る必要があります。これはその他のクラスと同様、接頭辞はトランジションの `name` 属性と一致しているほか、 `move-class` 属性で手動でクラスを指定できます。 @@ -190,7 +190,7 @@ Vue.createApp(Demo).mount('#list-complete-demo') TODO: example -### 時間差でのリストトランジション +## 時間差でのリストトランジション data 属性によって JavaScript によるトランジションと通信することで、時間差でのリストトランジションが可能となります: From 32f5338477750e27603847494ad1e0fa95974f75 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 10 May 2021 21:37:50 +0900 Subject: [PATCH 3/3] docs: translate transitions list page --- src/guide/transitions-list.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md index 976d4a7d..a11755be 100644 --- a/src/guide/transitions-list.md +++ b/src/guide/transitions-list.md @@ -5,10 +5,10 @@ - 個別のノード - 一度だけレンダリングされる複数のノード -その上で、例えば `v-for` のように、全てをまとめてレンダーしたいリスト全体がある場合はどうしましょうか？このような場合では、 `` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります: +その上で、例えば `v-for` のように、全てをまとめてレンダリングしたいリスト全体がある場合はどうしましょうか？このような場合では、 `` コンポーネントを利用します。ですが具体的な例を見る前に、コンポーネントについていくつかの重要なことを知っておく必要があります: -- By default, it doesn't render a wrapper element, but you can specify an element to be rendered with the `tag` attribute. -- 2つの排他の要素が切り替わっているわけではないため、[Transition モード](/guide/transitions-enterleave#transition-modes) は利用できません。 +- デフォルトでは、ラッパー要素はレンダリングされませんが、 `tag` 属性でレンダリングする要素を指定することができます。 +- 2つの排他の要素が切り替わっているわけではないため、[トランジションモード](/guide/transitions-enterleave#トランジションモード) は利用できません。 - 要素の内部では、 **常に** 固有の `key` 属性を **持つ必要** があります。 - CSS トランジションクラスは内部の要素に適用され、グループやコンテナには適用されません。