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 に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...

MySQLはデータベースのN+1クエリ問題を解決します

導入HibernateやMyBatisなどのORMフレームワークでは、部門に関連付けられたユーザーオ...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

Linuxにログインする際の文字セットの問題を解決する方法

文字セットエラーは常に存在するロケール: LC_CTYPE をデフォルト ロケールに設定できません:...

個人ブログシステムを構築するためのDockerの超シンプルな実装

Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...

印刷広告を成功させるための「3I」基準

国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

MySQLインデックスの失敗の典型的なケース

目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...

Ajax jQueryはページ上のdivの更新効果を実現します

元のコードは次のとおりです。 <div class='コントロールグループ'&...

Vueページジャンプの実装方法

1. this.$router.push() 1. ビュー <テンプレート> <d...

プロジェクトのフロントエンドとバックエンドでの Echart チャートの使用に関する詳細な説明

目次序文1. プロジェクトアーキテクチャ2. Echart公式サイトにアクセスして自己分析を学ぶ2....

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...

CentOS7 構成 Alibaba Cloud yum ソースメソッドコード

Centos yumフォルダを開くコマンドcd /etc/yum.repos.d/を入力します。 w...

CSS の 4 つのインポート方法と優先順位の簡単な分析

第一に: CSSを導入する4つの方法CSS を導入する方法には、インライン スタイル、埋め込みスタイ...