Vue トランジションは router-link と $router.push では機能しません

Question

次の App.vue ファイルがあります:

リーリー

および次のルーター ファイル:

リーリー

$router.push("/dashboard"); または router-link(to ="/dashboard" active-class="active") を使用するかどうかに関係なく、アプリを実行してリンクをクリックしたとき 。他の多くの質問やチュートリアルを確認しましたが、残念ながらまだ機能しません。変換が行われない理由は何か考えられますか?

Answer 1

＃＃＃変化：＃＃＃ リーリー ＃＃＃に＃＃＃ リーリー

変換ではビューへの変更は検出されないため、変更できるものを提供する必要があります。 また、

fade

は CSS の実際のアニメーションである必要があることに注意してください。たとえば、次のようになります。 リーリー

Answer 2

コードには変更できるものがいくつかあります。

まず第一に、RouterView は グローバル登録 であるため、インポートを宣言する必要はありません。 vue-router がプロジェクトにインストールされている限り、RouterView または router-view をテンプレート上で直接安全に使用できます。

2 番目に、name プロパティを静的プロパティに変更する必要があります。 :name="fade" と記述することは、変数 fade の値を name に渡すことを意味します。コードに基づくと、fade は変数ではなく文字列であると思われます。つまり、プロップを name="fade" に変更する必要があります。 静的および動的プロパティの詳細についてはこちらをご覧ください。

最後に、トランジションには CSS を使用する必要があります。 名前付き変換を宣言しているため、次の CSS を追加する必要があります:

リーリー

CSS での fade の使用に注意してください。これは、name 属性で指定される値であり、次の場合を意味します:

リーリー

その後、CSS には .slide-in-enter-active、.slide-in-enter-leave などが含まれるはずです。