Vue でルーティング遷移効果を実装する 4 つの方法

Vue ルータートランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単に追加する方法です。アプリケーションのさまざまなページ間でスムーズなアニメーションやトランジションを追加できます。適切に使用すると、プログラムがよりプロフェッショナルに見え、ユーザーエクスペリエンスが向上します。

この記事では、まず Vue ルーター遷移の基本を紹介し、次にインスピレーションを与えるためにいくつかの例を示します。以下に一例を挙げます。

Vue アプリケーションにルートを追加する

典型的な Vue ルーターの設定は次のようになります。

<テンプレート>
  <ルータービュー />
</テンプレート>

Vue Router の以前のバージョンでは、<router-view> を <transition> コンポーネントで単純にラップできました。

ただし、新しいバージョンの Vue ルーターでは、v-slot を使用してプロパティを分解し、内部スロットに渡す必要があります。これには、遷移コンポーネントに囲まれた動的コンポーネントが含まれます。

<router-view v-slot="{ コンポーネント }">
  <遷移>
    <component :is="コンポーネント" />
  </トランジション>
</ルータービュー>

ルートに遷移を追加する

デフォルトでは、<component> を <transition> でラップすると、アプリケーション内のすべてのルートに同じ遷移が追加されます。
各ルートの遷移をカスタマイズする方法は 2 つあります。

トランジションを各コンポーネントに移動する

まず、動的コンポーネントをトランジションコンポーネントでラップする代わりに、<transition> を各コンポーネントに移動することができます。このような：

<テンプレート>
  <遷移>
    <div class="wrapper">
      <!-- -->
    </div>
  </トランジション>
</テンプレート>

このプロセスは、移行が必要なルートごとにこのように継続されます。これにより、遷移名を変更して各ルートをカスタマイズできます。

v-bindによる動的遷移

別のアプローチは、遷移の名前を変数にバインドすることです。その後、独自のパスに応じてこの変数を動的に変更できます。
これは、Vue ルーターのドキュメントからの例です。現在のルートでウォッチモードを使用して、 transitionName 変数を動的に設定します。

<トランジション:name="トランジション名">
  <component :is="コンポーネント" />
</トランジション>

時計：
  '$route' (to、from) {
    定数 toDepth = to.path.split('/').length
    定数 fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

Vue ルーター遷移の基本を理解したので、いくつかの例を見てみましょう。

#1 – グラデーショントランジション

グラデーションのページ遷移は、最も直接的なアニメーション効果になります。これは、要素の透明度を変更することで実現できます。
まず、フェードと呼ばれるトランジションを作成します。遷移モードがアウトインに設定されていることに注意してください。

遷移モードは 3 つあります。

デフォルト: フェードインとフェードアウトの遷移が同時に発生します
in-out: 新しい要素が最初にフェードインします。現在の要素はフェードアウトします。
out-in: 現在の要素が最初にフェードアウトします。その後、新しい要素がフェードインし始めます。

新しい要素がスムーズにフェードインするには、新しいトランジションを開始する前に現在の要素を削除する必要があります。したがって、mode = "out-in" を使用する必要があります。

<router-view v-slot="{ コンポーネント }">
  <トランジション名="フェード" モード="アウトイン">
    <component :is="コンポーネント" />
  </トランジション>
</ルータービュー>

<transition> は、アニメーションサイクル中に動的に追加または削除できるいくつかの CSS クラスを提供します。
6個あります。異なるトランジションクラス (フェードイン用に 3 つ、フェードアウト用に 3 つ)。

v-enter-from / v-leave-from: 遷移の開始後に削除される遷移の初期状態
v-enter-active / v-leave-active: 遷移アクティブ化状態
v-enter-to / v-leave-to: 遷移の終了状態

フェードトランジションには、fade-enter-from というクラスがあります。

フェードインとフェードアウトの状態の不透明度を 0 にします。次に、トランジションがアクティブなときに、透明度をアニメーション化します。

アニメーション中に fade-enter-from クラスと fade-leave-to クラスが削除されるため、透明度を 1 に設定する必要もありません。これにより、要素自体がデフォルトの不透明度 1 にアニメーション化されます。

.フェード-エンター-アクティブ、
.フェードアウトアクティブ{
  遷移: 不透明度 0.5 秒、緩和;
}

.フェードインから、
.フェードアウト{
  不透明度: 0;
}

一部の仮想コンポーネントでは、これが最終的な遷移効果になります。

#2 – スライドの切り替え

次はページスライドトランジションです。

テンプレートは以下のようになります。フェードインとフェードアウトの遷移を同時に発生させたいので、遷移に特別なモードを設定する必要はありません。

<router-view v-slot="{ コンポーネント }">
  <トランジション名="スライド">
    <component :is="コンポーネント" />
  </トランジション>
</ルータービュー>

例をわかりやすくするために、各コンポーネントの幅を 100% に設定し、少なくとも 1 vh を占めるように設定し、背景色もそれぞれ設定しました。

.ラッパー{
  幅: 100%;
  最小高さ: 100vh;
}

最後に、トランジションスタイルによって、スライドされるコンポーネントの絶対位置がアニメーション化されます。別のスライド方向が必要な場合は、CSS プロパティを変更して (top、bottom、left、right) を設定します。

.スライド-エンター-アクティブ、
.slide-leave-active {
  遷移: すべて 0.75 秒のイーズアウト。
}


.スライド入力{
  位置: 絶対;
  右: 0;
}


.slide-enter-from {
  位置: 絶対;
  右: -100%;
}


.slide-leave-to {
  位置: 絶対;
  左: -100%;
}


.slide-leave-from {
  位置: 絶対;
  左: 0;
}

最終結果は次のとおりです。

#3 – ズームトランジション

スケール遷移はフェード遷移と非常によく似ています。アニメーションの正しい順序を確保するには、モードを out-in に設定する必要があります。

<router-view v-slot="{ コンポーネント }">
  <トランジション名="スケール" モード="アウトイン">
    <component :is="コンポーネント" />
  </トランジション>
</ルータービュー>

次に、スタイルを使用して要素の不透明度と transform: scale を変更します。

.scale-enter-active、
.scale-leave-active {
  遷移: すべて 0.5 秒の緩和;
}


.scale-enter-from、
.scale-leave-to {
  不透明度: 0;
  変換: スケール(0.9);
}

この遷移をよりきれいに見せるために、Web ページ全体の背景色を黒に設定することができます。

これが最終結果です:

#4 – トランジションを組み合わせる

トランジション効果は多数あります。一般的なアプローチは、スライドショーとズームを 1 つのトランジションに組み合わせるなど、いくつかの基本的なトランジションを組み合わせることです。

<router-view v-slot="{ コンポーネント }">
  <トランジション名="スケールスライド">
    <component :is="コンポーネント" />
  </トランジション>
</ルータービュー>

.scale-slide-enter-active、
.scale-slide-leave-active {
  位置: 絶対;
  遷移: すべて 0.85 秒の緩和;
}

.scale-slide-enter-from {
  左: -100%;
}

.scale-slide-enter-to {
  残り: 0%;
}

.scale-slide-leave-from {
  変換: スケール(1);
}

.scale-slide-leave-to {
  変換: スケール(0.8);
}

これが最終的な効果です

かなり良さそうですね。

#5 – 最終的な考え

最近、Vue を改良しているときに、ハイエンドの Vue3+TS チュートリアルを見つけました。

これで、Vue でルーティング遷移効果を実装する 4 つの方法についての記事は終了です。Vue ルーティング遷移効果に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: