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 インストール チュートリアル
ローカル環境はWindows10+WSL2(Ubuntu)です。サーバーにDockerをインストール...
win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...
MySQL 5.5.56無料インストール版の設定方法をテキストコードで詳しく説明します。具体的な内容...
docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...
目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...
1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...
1. 改行なしを実現するには<nobr>タグを使用するコードをコピーコードは次のとおりで...
勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...
最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...
1. 絶対位置とマージンを使用するこの方法の原則は、左側と右側をドキュメントの流れから外れるように配...
この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...
丁寧に掃除を始めましょう!未使用ボリュームの一覧docker ボリューム ls -qf dangli...
この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに...
目次導入効果原理形状練習するこの記事では、例を使用して、MySQL マスター/スレーブ レプリケーシ...
#include <asm/io.h> #define ioremap(cookie,...