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 インストール チュートリアル

推薦する

MYSQLの文字セット設定方法(端末の文字セット)の詳しい説明

序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...

Docker イメージのローカル Elasticsearch ポート操作へのアクセス

dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...

MySQL でのインデックスの追加と削除に関連する操作

目次1. インデックスの役割2. インデックスの作成と削除(1)ALTER TABLE文を使用して、...

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

ハイパーリンクを表示して開く方法

<br />インターネット上の無数の情報は基本的に HTML ドキュメントで構成されてお...

Vue テンプレートのコンパイルの詳細

目次1. 解析する1.1 傍受のルール1.2 傍受プロセス部分1.3 パーサーの概要2. 最適化する...

Docker に ElasticSearch 6.x をインストールする詳細なチュートリアル

まず、イメージをプルします(またはコンテナを作成するだけで、自然にプルされます)。 docker p...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

Docker デプロイメントサービスの落とし穴を登る過程の詳細

初めて書きます。自己紹介させてください...みなさんこんにちは。私はジャスミンです。なぜジャスミンと...

HTMLボタンを中央に配置する方法

HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...

Vue における {{}}、v-text、v-html の違いと用途の詳細な説明

{ {}} 値を取得すると、タグの元のコンテンツはクリアされませんv-textは値を取得し、タグの元...

Vueのインストールと使用

目次1. Vueのインストール方法1: CDNの導入方法2: 直接ダウンロードしてインポートする方法...

Vue.jsのレンダリング関数の使い方の詳しい説明

Vue では、ほとんどの場合、テンプレートを使用して HTML を作成することを推奨しています。ただ...