Vue Academy · レッスン

Transitionコンポーネント

v-enter-from、v-enter-active、v-enter-to、v-leave-*クラス、カスタムクラス用のname propについて学習します。

「Transitionコンポーネント」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

Transitionコンポーネントの役割

Vueには組み込みの<Transition>コンポーネントがあり、v-ifまたはv-showで単一の要素またはコンポーネントが挿入・削除されるときに、入場・退出アニメーションを適用します。

このコンポーネント自体が追加のDOM要素を描画することはありません。子要素のCSSクラスとタイミングだけを管理します。

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

単一要素のみ

<Transition>が受け取れる直接の子要素は1つだけです。複数の兄弟要素をラップしても機能しないため、リストには代わりに<TransitionGroup>を使います。

子要素はv-if、v-show、または動的コンポーネントで切り替える必要があります。

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

6つのTransitionクラス

入場または退出の間、Vueは6つのクラスを順番に自動で追加・削除します。

v-enter-from / v-leave-from - 開始時の状態
v-enter-active / v-leave-active - アクティブフェーズ（transitionはここに記述します）
v-enter-to / v-leave-to - 終了時の状態

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

トランジションに名前を付ける

トランジションにnameプロパティを指定すると、クラスの接頭辞がv-から指定した名前に変わります。name="fade"の場合、クラスはfade-enter-from、fade-enter-activeなどになります。

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

完全なフェードの例

典型的なフェードではopacityをアニメーションさせます。要素は完全に透明な状態で始まり、アクティブクラスでトランジションを宣言し、toクラスで完全な不透明度にします。

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

入場シーケンスを順に見る

要素が挿入されるとき：

描画前にfade-enter-fromとfade-enter-activeが追加されます（opacityは0）。
次のフレームでfade-enter-fromが削除され、fade-enter-toが追加されるため、opacityが1に向かってアニメーションします。
トランジションが終了すると、activeクラスとtoクラスの両方が削除されます。

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

退出シーケンス

退出はleaveクラスを使い、入場と反対の流れになります。多くの場合、両方向で同じアクティブルールを再利用します。

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-ifとv-showの違い

どちらもトランジションを開始します。v-ifは実際に要素をマウント・アンマウントするのに対し、v-showは要素をDOMに残したままdisplayを切り替えます。v-showでは、アニメーションが見えるように、Vueがアクティブフェーズの前後でdisplayの切り替えを処理します。

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

初回レンダリングで表示する

デフォルトでは、初回レンダリング時にトランジションは実行されません。appearプロパティを追加すると、コンポーネントが初めてマウントされるときに入場アニメーションが再生されます。

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

2つの要素間をトランジションする

1つのTransition内でv-ifとv-elseを使い、2つの要素を入れ替えます。同じタグの要素を使う場合は、それぞれに一意のkeyを指定して、Vueが別の要素として扱えるようにします。

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

動きを抑えた表示とアクセシビリティ

動きを少なくしたいユーザーに配慮します。prefers-reduced-motionメディアクエリを使ってトランジションを無効化または短縮し、アニメーションで不快感を与えないようにします。

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

確認テスト

fade-enter-fromは何を定義しますか？

振り返り

組み込みの<Transition>コンポーネントについて学びました。これは、v-if/v-showで切り替える1つの要素をラップし、6つのCSSクラス（enter-from、enter-active、enter-toと、それぞれのleave版）を適用します。また、nameによる接頭辞、初回レンダリング用のappear、入れ替え用のmodeにも対応しています。

よくある質問

「Transitionコンポーネント」レッスンは無料ですか？

はい。「Transitionコンポーネント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Transitionコンポーネント」で何を学びますか？

v-enter-from、v-enter-active、v-enter-to、v-leave-*クラス、カスタムクラス用のname propについて学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Transitionコンポーネント」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る