Vue Academy · レッスン

ルート遷移とアニメーション

TransitionでのRouterView、ルートに応じたtransition-name、ルート間のスライド／フェード

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

ルート間をアニメーションさせる

URL が変わると、一致したコンポーネントは即座に切り替わります。ビューを Vue の Transition でラップすると、ページ間をフェードやスライドで切り替え、より滑らかに見せられます。

v-slot を使った RouterView

アニメーションを適用するには、解決されたコンポーネントにアクセスする必要があります。RouterView の スコープ付きスロット形式では、Component と route が公開されます。

<RouterView v-slot="{ Component }">
  <component :is="Component" />
</RouterView>

Transition でラップする

動的な component を Transition で囲みます。Vue はルートコンポーネントのマウント時とアンマウント時に、enter/leave クラスを適用します。

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

mode out-in の理由

mode がないと、古いページと新しいページのアニメーションが同時に始まり、重なってしまいます。mode="out-in" を指定すると、古いページが退出してから新しいページが入るようになります。

CSS を定義する

name は CSS クラスの接頭辞になります。フェード用の enter と leave のトランジションを定義します。

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

メタデータによるルートごとのトランジション

ルートの meta にトランジション名を保存すると、ルートごとに異なるアニメーションを適用できます。あるセクションにはスライド、別のセクションにはフェードを使うといった設定が可能です。

{ path: '/about', component: About, meta: { transition: 'slide' } }

トランジション名を計算する

スロットから route.meta.transition を読み取り、Transition の name にバインドします。値がない場合はデフォルト値に戻します。

<RouterView v-slot="{ Component, route }">
  <Transition :name="route.meta.transition || 'fade'" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

方向に応じたスライド

ナビゲーションの方向に基づいてトランジションを動的に選択できます。たとえば、先へ進むときは左へ、戻るときは右へスライドさせるには、ガードでルートの深さを比較します。

スライドの開始と退出

スライドは不透明度と transform を組み合わせます。入ってくるページを右から移動させ、退出するページを左へ移動させます。

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>

パラメーター変更時の key 指定

/user/1 と /user/2 のように、2 つのルートが同じコンポーネントを共有している場合、Vue はコンポーネントを再利用し、トランジションを省略します。ルートパスに :key を追加して、再レンダリングとアニメーションを強制します。

<component :is="Component" :key="route.path" />

アニメーション軽減設定への対応

アクセシビリティのため、CSS メディアクエリを使って、ユーザーがアニメーションの軽減を設定している場合はアニメーションを無効にします。

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

理解度チェック

ルートトランジションについての知識を確認します。

まとめ

ルートをアニメーションさせる方法を学びました。

v-slot と RouterView を使って Component と route を取得します。
component :is を Transition でラップし、mode="out-in" を使用します。
トランジション名に基づいて enter/leave の CSS を定義します。
route.meta.transition を読み取ってルートごとのアニメーションを設定し、共有コンポーネントには :key を追加します。

よくある質問

「ルート遷移とアニメーション」レッスンは無料ですか？

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

「ルート遷移とアニメーション」で何を学びますか？

TransitionでのRouterView、ルートに応じたtransition-name、ルート間のスライド／フェードブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ルート遷移とアニメーション」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る