<Transition> 単一要素の出入りトランジション
最終更新：2026-10-22
<Transition> 単一要素の出入りトランジション
| グループ | ビルトイン |
|---|---|
| 種類 | コンポーネント・要素 |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<Transition name="fade">
<p v-if="show">内容</p>
</Transition>
/* クラス名：fade-enter-active / fade-enter-from / fade-enter-to（leave も同様） */
.fade-enter-active { transition: opacity .3s }
.fade-enter-from { opacity: 0 }⚙️ 引数
| props | name（クラス名のプレフィックス）/ appear / mode（out-in など）/ duration / JS フックを使うなら css:false |
|---|
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Toggling fades the paragraph out and back in over ~0.3s.💡 ポイント
💡 ヒント name がクラス名のプレフィックスを決めます（fade-* など）。省略した場合はデフォルトの v-* が使われます。
⚠️ 注意 内側には必ず 1 つのルート要素 / コンポーネントだけを置きます。複数の要素には か v-if / v-else の分岐を使ってください。
ℹ️ 補足 mode="out-in" は旧要素の退場が完了してから入場させるので、位置のジャンプを避けられます。
🏷️ 関連ビルトイン
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q アニメーションが動かないのはなぜですか？
A 多くの場合、対応する CSS を書いていないか、クラス名のプレフィックスが name と一致していないかのどちらかです。fade-enter-active などのルールを確認してください。
Q CSS と JS フックを同時に使えますか？
A 使えますが、css:false のときは JS フックだけに制御を任せ、二重の制御を避けてください。
Q リストのアニメーションはどうしますか？
A <TransitionGroup> を使ってください。移動のトランジション用の .move クラスも提供されます。
