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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue はルーティング遷移アニメーションのジッターの問題を解決します (詳細な例)

<<:  Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法

>>:  Linux での MySQL 8.0 インストール チュートリアル

推薦する

IDEA で Docker を WSL2 にデプロイする詳細なプロセス

ローカル環境はWindows10+WSL2(Ubuntu)です。サーバーにDockerをインストール...

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

MySQL 5.5.56 インストール不要版の設定方法

MySQL 5.5.56無料インストール版の設定方法をテキストコードで詳しく説明します。具体的な内容...

docker runとstartの違い

docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...

Vueはアップロードコンポーネントを実装します

目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...

CSS フロントエンドの知識ポイントのまとめ(必読)

1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...

div の特定の実装は自動的に折り返されず、HTML で折り返されないよう強制されます。

1. 改行なしを実現するには<nobr>タグを使用するコードをコピーコードは次のとおりで...

Linux FTP匿名アップロードとダウンロードが自動的に開始される問題を解決する

勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...

nginx を使用して http を https に変換するサンプルコード

最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...

CSSを使用して中央に固定された2つの列と適応型列を実現する方法

1. 絶対位置とマージンを使用するこの方法の原則は、左側と右側をドキュメントの流れから外れるように配...

Windows での MySQL 8.0.15 の詳細なインストールと使用のチュートリアル

この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...

Docker クリーンアップ環境操作

丁寧に掃除を始めましょう!未使用ボリュームの一覧docker ボリューム ls -qf dangli...

均一なアニメーション効果を実現するJavaScript

この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに...

MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明

目次導入効果原理形状練習するこの記事では、例を使用して、MySQL マスター/スレーブ レプリケーシ...