<TransitionGroup> リストの出入りトランジション
最終更新：2026-10-22
<TransitionGroup> リストの出入りトランジション
| グループ | ビルトイン |
|---|---|
| 種類 | コンポーネント・要素 |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>
.list-move { transition: transform .4s }⚙️ 引数
| props | tag（どんなタグに描画するか。デフォルトではコンテナを描画しない）/ name / move-class / appear |
|---|
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
New items appear one by one while existing rows slide aside.💡 ポイント
⚠️ 注意 各項目には必ず一意の key が必要です。key がないと位置の移動を計算できません。
ℹ️ 補足 移動トランジションは挿入される .move クラス（name のプレフィックス付き）で行われます。transition か animation が必要です。
💡 ヒント tag="ul" を指定すると実際のリストコンテナが描画されます。tag を指定しなければ余分な要素は描画されません。
🏷️ 関連ビルトイン
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q Transition との違いは？
A Transition は単一要素の出入りを扱い、TransitionGroup はリストの追加・削除と移動を扱います。
Q 移動アニメーションが出ないのは？
A .move のトランジションルールが書かれているか、key が一意かを確認してください。
Q 入場と移動を同時にアニメーションできますか？
A できます。入場と移動は並行して計算され、必要なら move-class で調整できます。
