vueでの遷移方法-フロントエンドQ&A-php.cn

vueでの遷移方法

WBOY

リリース： 2023-05-08 10:07:37

オリジナル

686 人が閲覧しました

Vue でのページジャンプの実装は、フロントエンド開発における一般的な要件の 1 つです。ユーザーエクスペリエンスを向上させるために、ページジャンプ中にトランジション効果を実装することも良い選択です。

Vue には、ページ遷移効果を実現するさまざまな方法が用意されています。次に、それらを 1 つずつ紹介します。

Vue アニメーション

Vue アニメーションは、Vue が公式に提供している API で、Vue コンポーネントにトランジション効果を実装するために使用されます。 Vue アニメーションは、Vue のトランジションメカニズムを通じて実装する必要があります。トランジションメカニズムのフック関数には、トランジション効果を制御するためのさまざまなメソッドが用意されています。例:

before-enter (入る前): 要素が挿入される前
enter(入る):要素挿入時の状態(startState)
after-enter(入る):要素挿入処理完了後の状態(endState)
enter-canceled: エントリがキャンセルされた場合、このフックが呼び出されます。

次は、Vue アニメーションを使用してトランジション効果を実現するサンプルコードです:

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

ログイン後にコピー

この例では、「fade」という名前のアニメーションがルーターにバインドされています。 - ビューでは、トランジション効果を示すために、新しいページに入るときにグラデーション効果がかかります。時間の経過とともに不透明度が 0 から 1 に徐々に増加します。同様に、古いページから出るときもグラデーションがかかります。不透明度は時間の経過とともに増加し、1 から 0 まで徐々に変化します。

サードパーティライブラリの実装

Vue トランジション効果は、サードパーティライブラリを通じて実現することもできます。その中で、より一般的なものは次のとおりです。

transition-group: 各コンポーネントが相互接続されている場合に使用されます
vue-router-transition: ページ切り替えシナリオに使用されます
animated-vue: 他のシーンの複数のトランジション効果に使用されます

transition-group

transition-group は、リストやグリッドなどのコンポーネント間のアニメーション遷移効果を簡単に実現できます。

<transition-group name="list" tag="p">
  <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>

ログイン後にコピー

この例では、span 要素がループされ、transition-group に追加されます。各要素にはキー属性セットがあります。これらはすべて同じクラス名 list-item を持ちます。 transition-group は、これらの要素を動的に追加および削除して、トランジション効果を実現します。

vue-router-transition

vue-router-transition は、Vue Router でページ遷移効果を実装するために使用されます。 vue-router-transition を使用するには、v-enter および v-leave のクラス名を Vue Router のルーティングコンポーネントに追加するだけです。 CSS を使用してこれらのスタイルを定義し、トランジション効果を実現できます。

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

// fade 动画实现方式同上

ログイン後にコピー

この例では、2 つのページが切り替わるときに、新しいページが最初に非表示になり、古いページの上に配置され、次に CSS アニメーションを使用して、入ったり出たりする遷移効果を実現します。

animated-vue

animated-vue は、Vue トランジション効果を実装するために使用される別のライブラリで、ページを作成するために複数の種類のアニメーション (開始、終了、ポップアップなど) を提供します。トランジションがより豊かになります。

<transition appear :css="false"
  v-bind:enter-active-class="'animated fadeIn'"
  v-bind:leave-active-class="'animated fadeOut'"
  >
  <router-view></router-view>
</transition>

ログイン後にコピー

この例では、いくつかの異なる CSS アニメーションを提供する「animated」という CSS ライブラリを使用しています。このライブラリを Vue のトランジションメカニズムと併用して、興味深いページトランジション効果を実現できます。

概要

Vue にトランジションエフェクトを実装すると、ユーザーエクスペリエンスが向上するだけでなく、ページのインタラクティブ性や美しさも向上します。 Vue は、トランジション効果を実現するためのさまざまな組み込み API とサードパーティライブラリを提供しており、さまざまなニーズやシナリオに応じて選択できます。

以上がvueでの遷移方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。