Vue プロジェクトで順方向および逆方向のルーティング切り替えアニメーション効果を実装するにはどうすればよいですか?

Vue プロジェクトで順方向および逆方向のルーティング切り替えアニメーション効果を実装するにはどうすればよいですか?

Vue プロジェクトでは、ルーティングを管理するために Vue Router を使用することがよくあります。ルートを切り替える場合、トランジション効果なしでページの切り替えが瞬時に完了します。ページの切り替えにアニメーション効果を追加したい場合は、Vue のトランジション システムを使用できます。

Vue のトランジション システムは、要素の挿入または削除時にトランジション効果を追加する簡単な方法を提供します。この機能を使用して、順方向および逆方向のルーティング切り替えをアニメーション化できます。

まず、Vue のトランジション コンポーネント をプロジェクトに導入する必要があります。これは、ルート コンポーネントまたはアニメーションを追加する必要があるコンポーネントに導入できます。

次に、 タグでトランジション アニメーションのスタイルを定義する必要があります。 Vue のトランジション コンポーネントには、使用できる次の CSS クラス名があります。

• enter: 挿入時の開始状態。アニメーションを挿入する直前に適用されます。
• enter-active: insert 削除時の終了状態は、挿入アニメーションがトリガーされてから 1 フレーム後、挿入アニメーションが完了するまで適用されます。
##leave: 削除時の開始状態は、アニメーションを削除する直前に適用されます
• leave-active : 削除時の終了状態は、削除アニメーションがトリガーされてから 1 フレーム後、削除アニメーションが完了するまで適用されます。
• #次は、サンプル アニメーション効果のコード例です。

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

上記のコードでは、「フェード」と呼ばれるトランジション効果を使用し、「アウト-イン」モードを使用します。つまり、ルートを切り替えるときは、まず古いページを離れてから、新しいページに入る必要があります。

タグでは、 を使用して、現在のルートに対応するコンポーネントを表示します。対応する CSS クラス名が開始時と終了時に追加されます。

次に、