Vue.js 2ページとvue-routerによる要素の遷移

Question

私は簡単なページの入力と終了を達成しようとしています（Vue-CLI）。 に移行すると、私はいくつかの要素をアニメートしてから、次のコンポーネントに移動します。しかし、<router-link>は、アニメーションが終了するのを待つことはありません。

私の試み：

App.vue：<router-view><transition ... >に包まれたハンドルページ遷移

Component.vue：上でmounted()セット状態this.show: trueへと<transition ... >とv-ifアニメイト特定の要素が

をレンダリング

App.vueでコンポーネントから移動すると210 beforeRouteLeaveが呼び出され、this.show: falseが特定の要素をアニメートするように設定され、次に移動する必要があります。しかし<router-link>は、要するに...

を待たずに、すぐに次のコンポーネントを描画する私はこのhttp://animate.mhaagens.me/

に似てなめらかに任意のヒントを達成したいのですが？

Answer 1

Vueのトランジションエフェクトは、トランジションモードを提供しています。あなたが探している動作が正確にわからないため、すべての問題を解決するかどうかはわかりません。

transition mode="out-in"はおそらくあなたが探しているものです。新しい遷移を開始する前に最初の遷移が終了するのを待っています。 the docsをチェックしてください、彼らは非常に徹底的で、本当に良いです。