Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単に追加する方法です。 アプリケーションのさまざまなページ間でスムーズなアニメーションやトランジションを追加できます。適切に使用すると、プログラムがよりプロフェッショナルに見え、ユーザー エクスペリエンスが向上します。 この記事では、まず Vue ルーター遷移の基本を紹介し、次にインスピレーションを与えるためにいくつかの例を示します。以下に一例を挙げます。 Vue アプリケーションにルートを追加する典型的な Vue ルーターの設定は次のようになります。 <テンプレート> <ルータービュー /> </テンプレート> Vue Router の以前のバージョンでは、<router-view> を <transition> コンポーネントで単純にラップできました。 ただし、新しいバージョンの Vue ルーターでは、v-slot を使用してプロパティを分解し、内部スロットに渡す必要があります。 これには、遷移コンポーネントに囲まれた動的コンポーネントが含まれます。 <router-view v-slot="{ コンポーネント }"> <遷移> <component :is="コンポーネント" /> </トランジション> </ルータービュー> ルートに遷移を追加するデフォルトでは、<component> を <transition> でラップすると、アプリケーション内のすべてのルートに同じ遷移が追加されます。 トランジションを各コンポーネントに移動するまず、動的コンポーネントをトランジション コンポーネントでラップする代わりに、<transition> を各コンポーネントに移動することができます。 このような: <テンプレート> <遷移> <div class="wrapper"> <!-- --> </div> </トランジション> </テンプレート> このプロセスは、移行が必要なルートごとにこのように継続されます。 これにより、遷移名を変更して各ルートをカスタマイズできます。 v-bindによる動的遷移別のアプローチは、遷移の名前を変数にバインドすることです。 その後、独自のパスに応じてこの変数を動的に変更できます。 <トランジション: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 つあります。
新しい要素がスムーズにフェードインするには、新しいトランジションを開始する前に現在の要素を削除する必要があります。したがって、mode = "out-in" を使用する必要があります。 <router-view v-slot="{ コンポーネント }"> <トランジション名="フェード" モード="アウトイン"> <component :is="コンポーネント" /> </トランジション> </ルータービュー> <transition> は、アニメーション サイクル中に動的に追加または削除できるいくつかの CSS クラスを提供します。
フェードトランジションには、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法
>>: Linux での MySQL 8.0 インストール チュートリアル
序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...
dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...
目次1. インデックスの役割2. インデックスの作成と削除(1)ALTER TABLE文を使用して、...
この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...
標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...
<br />インターネット上の無数の情報は基本的に HTML ドキュメントで構成されてお...
目次1. 解析する1.1 傍受のルール1.2 傍受プロセス部分1.3 パーサーの概要2. 最適化する...
まず、イメージをプルします(またはコンテナを作成するだけで、自然にプルされます)。 docker p...
目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...
初めて書きます。自己紹介させてください...みなさんこんにちは。私はジャスミンです。なぜジャスミンと...
HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...
{ {}} 値を取得すると、タグの元のコンテンツはクリアされませんv-textは値を取得し、タグの元...
目次1. Vueのインストール方法1: CDNの導入方法2: 直接ダウンロードしてインポートする方法...
Vue では、ほとんどの場合、テンプレートを使用して HTML を作成することを推奨しています。ただ...