Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポーネントとしてスクロールする必要があります)
ルートルートコンポーネントにマウススクロール時のリスナーを追加し、マウント時にリスナーを呼び出します。他のルートにジャンプする(このルートルートから飛び出す)とルートルートコンポーネントが破棄されるため、ルートルートの破棄フック関数内でイベントリスナーをクリアします。

Vueルーティング切り替え遷移

Vue トランジション

<トランジション:name="トランジション名">
      <div></div>
 </トランジション>

transition は、遷移が必要なコンポーネント、div、またはルートをラップするために使用します。作成または破棄されると、指定されたアニメーション効果が読み込まれます。このアニメーション効果は自分で指定する必要があります。ここでは、指定された transitionName

次に、これをデータで宣言しますが、異なる名前が前方ルーティングまたは後方ルーティングに対応する必要があるため、この値を ' ' に割り当てます。

ルートが前方(この場合は下方向)の場合は、スライドダウンを指定します。

次に、スライドダウンのさまざまな状態でのアクティベーション効果をトランジション効果として定義します。

.スライドダウン-Enter-Active、
.スライドダウン-アクティブのままにする{
遷移: すべて 500 ミリ秒;
位置: 絶対;
}

次に開始アニメーションを定義します

.スライドダウンエンター{
不透明度: 0;
変換: translate3d(0, 100%, 0);
}

退出アクティベーションアニメーションを定義する

.スライドダウン-アクティブのままにする{
不透明度: 0;
変換: translate3d(0, -100%, 0);
}

以下は一般的に固定されており、つまり、-enter-active、-leave-active を遷移効果として宣言し、次に -enter、-leave-active を記述します。必要な具体的な変更は、一般的に 1 つの -enter と 1 つの -leave-active です。

画像の説明を追加してください

次に、経路が順方向か逆方向かを判断する方法です。まず、順方向と逆方向の経路を切り替える方法

次に、前方か後方かを判断するにはどうすればよいでしょうか。ルートを書くときにメタを書き、「ルートコンポーネント」でルートの変更を監視するときにルート情報を取得し、両者のサイズを比較して判断します。

画像の説明を追加してください画像の説明を追加してください

Vue マウスホイールスクロールルート切り替えエフェクトの実装方法についてはこれで終わりです。Vue ルート切り替えに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueはマウスホイールのスクロールによるページ切り替えを実装しています
  • Vue タブは一定の高さまでスクロールし、上部に固定され、タブをクリックしてさまざまなコンテンツ操作を切り替えます。
  • Vueはフルスクリーンスクロール切り替えを実装します
  • Vue スクロール タブ フォロー スイッチング効果
  • vue2.0 ルート切り替え後にページスクロール位置が変わらないバグの解決方法
  • Vueページはスクロールページに切り替わり、最上位のインスタンスが表示されます。
  • vue で vue-router を使用してページを切り替えるときにスクロールバーを自動的に上部にスクロールする方法
  • vue-router を使用してページを切り替えるときのスクロールバーの位置とスクロール リスナー イベントの詳細な説明
  • 画像のスクロールを実装するための Vue サンプルコード (回転灯のような効果)
  • Vue は 3D 切り替えスクロール効果を実装します

<<:  Linuxのwatchコマンドの使用

>>:  Mysql の mysql.user ユーザー テーブルの詳細な説明

推薦する

Dockerコンテナの入退出方法の詳細な説明

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

Nginxでネットワーク分離を解決した実践記録を詳しく解説

必要最近、Node オンライン サービスを移行する必要があったため、2 つの新しいオンライン サーバ...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

JavaScript を使用して二分探索木を実装する方法

コンピュータ サイエンスで最も一般的に使用され、議論されているデータ構造の 1 つは、二分探索木です...

CSS スタイル分類入門(基礎知識)

CSSスタイルの分類1. 内部スタイル ---- インラインスタイルスタイルタグの使用 <ス...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

MySQL 5.6 ルートパスワード変更チュートリアル

1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...

Alibaba Cloud Ubuntu 16.04 が IPSec サービスを構築

IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...

MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...

Vue+Websocketはチャット機能を実装するだけです

この記事では、チャット機能を簡単に実装するためのVue+Websocketの具体的なコードを参考まで...

Dockerパッケージイメージの実装と構成の変更

最近、Docker の学習や実際の運用で多くの問題に遭遇したので、それを記録するためにブログを書きま...

MySQL 最適化 Zabbix パーティション最適化

zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...

特定の MySQL テーブルの完全データと増分データをメッセージ キューに同期する - ソリューション

目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...

vuex名前空間の使用

目次Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェク...