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 をよろしくお願いいたします。