Vue でページ切り替えを実現するためにトランジション効果を使用するためのヒントとベストプラクティス-Vue.js-php.cn

Vue でページ切り替えを実現するためにトランジション効果を使用するためのヒントとベストプラクティス

王林

リリース： 2023-06-25 10:53:49

オリジナル

2738 人が閲覧しました

トランジション効果を使用して Vue でページ切り替えを実装するためのヒントとベストプラクティス

Web アプリケーションにおいて、ページ切り替えは、ユーザーがアプリケーションの構造と機能を理解するのに役立つ非常に重要なインタラクティブな動作です。ただし、切り替え速度が速すぎるとユーザーは混乱したりがっかりしたりしやすく、トランジション効果がないとページの切り替えも硬くて不自然になります。ユーザーエクスペリエンスを向上させるために、Vue でトランジションエフェクトを使用してページを切り替えることができます。この記事では、トランジションエフェクトを使用するテクニックとベストプラクティスについて説明します。

Vue のトランジション効果は、要素の出入り時に CSS クラスを追加/削除することで実現されます。これらのクラスはカスタム CSS スタイルを使用して、吸入効果やポップアップ効果、変形効果、色の変更などのさまざまな効果を実現できます。、などのトランジション効果。 Vue では、トランジションエフェクトを使用する 2 つの方法が提供されています。コンポーネントのトランジションプロパティとアニメーションプロパティを使用する方法と、組み込みのトランジションコンポーネントを使用する方法です。

コンポーネントのトランジションプロパティとアニメーションプロパティを通じて

#Vue コンポーネントでは、トランジションプロパティとアニメーションプロパティを使用してトランジション効果を追加できます。トランジション属性は要素の出入り時にトランジション効果を追加するために使用され、animate 属性は要素が保持されるときにトランジション効果を追加するために使用されます。ここでは、単純なページ切り替え効果を使用して、トランジションプロパティとアニメーションプロパティの使用方法を示します。

まず、2 つの遷移要素を Vue コンポーネントのテンプレートに追加し、それらの name 属性を定義する必要があります。例:

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

ログイン後にコピー

<transition name="page-slide">
  <router-view></router-view>
</transition>

ログイン後にコピー

上記のコードでは、page-fade と page-slide という 2 つの遷移要素を定義します。これらの名前は、フェード効果とスライド効果のカスタム CSS スタイルを追加するために使用されます。

次に、これらのスタイルをスタイルシートに追加する必要があります。例:

.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity 0.5s ease-out;
}

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

ログイン後にコピー

.page-slide-enter-active,
.page-slide-leave-active {
  transition: transform 0.5s ease-out;
}

.page-slide-enter,
.page-slide-leave-to {
  transform: translateX(100%);
}

ログイン後にコピー

上記のコードでは、CSS トランジションプロパティを使用してトランジション効果を定義します。トランジション時間は 0.5 秒で、イージング関数としてease-out が設定されています。また、要素が入るときと出るときのスタイルも定義します。ここで、 .page-fade-enter と .page-slide-enter は、要素が入るときのスタイルです。 .page-fade-leave-to と .page-slide-leave- to 要素が離れるときのスタイルです。これらのスタイルは、CSS クラスを追加または削除することによってトランジション効果をトリガーします。

最後に、Vue コンポーネントでトランジションエフェクトのトリガー条件を定義する必要があります。例:

.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity 0.5s ease-out;
}

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

ログイン後にコピー

.page-slide-enter-active,
.page-slide-leave-active {
  transition: transform 0.5s ease-out;
}

.page-slide-enter,
.page-slide-leave-to {
  transform: translateX(100%);
}

ログイン後にコピー

最後に、Vue コンポーネントでトランジションエフェクトのトリガー条件を定義する必要があります。例:

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

ログイン後にコピー

<transition name="page-slide" mode="out-in" appear>
  <router-view></router-view>
</transition>

ログイン後にコピー

上記のコードでは、mode 属性を使用してトランジション効果のトリガー条件を設定します。 mode 属性には、in-out と out-in の 2 つの値があり、それぞれ、要素に入るトランジション効果が最初にトリガーされ、次に要素を出るトランジション効果がトリガーされ、要素を出るトランジション効果がトリガーされることを示します。が最初にトリガーされ、次に要素を入力することによるトランジション効果がトリガーされます。また、Appearance 属性を使用して、要素が最初に読み込まれるときにトランジション効果をトリガーする必要があるかどうかを指定することもできます。

Vue には、トランジション効果を簡単に追加できる組み込みトランジションコンポーネントも提供されています。ここでは、単純な読み込みアニメーション効果を使用して、組み込みのトランジションコンポーネントの使用方法を示します。

まず、Vue コンポーネントのテンプレートに遷移コンポーネントを追加し、その name 属性を読み込みとして定義する必要があります。例:

<transition name="loading">
  <div v-if="isLoading" class="loading">
    <div class="loader"></div>
  </div>
</transition>

ログイン後にコピー

上記のコードでは、v-if ディレクティブを使用して、読み込みアニメーションを表示する必要があるかどうかを定義します。 isLoading の値が true の場合、読み込みアニメーションが表示されます。それ以外の場合、読み込みアニメーションは表示されません。また、カスタム CSS スタイルを追加して読み込みアニメーション効果を実現するために、loading という名前の遷移コンポーネントも設定しました。

次に、これらのスタイルをスタイルシートに追加する必要があります。例:

.loading-enter-active,
.loading-leave-active {
  transition: opacity 0.5s linear;
}

.loading-enter,
.loading-leave-to {
  opacity: 0;
}

ログイン後にコピー

上記のコードでは、CSS トランジションプロパティを使用してトランジション効果を定義します。トランジション時間は 0.5 秒で、イージング関数として線形が設定されています。また、要素が入るときと出るときのスタイルも定義します。 .loading-enter と .loading-leave-to は要素が入るときのスタイルで、 .loading-enter-active と .loading-leave-active は要素が入るときのスタイルです。要素が Leave. の場合、これらのスタイルは CSS クラスを追加または削除することによってトランジション効果をトリガーします。

最後に、Vue コンポーネントで読み込みアニメーションの開始と終了をトリガーする必要があります。例:

export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    load() {
      this.isLoading = true
      // do some heavy work
      this.isLoading = false
    }
  }
}

ログイン後にコピー

上記のコードでは、isLoading という名前の状態変数を定義し、load メソッドでそれを操作して、ページの読み込みプロセスをシミュレートします。 isLoading の値が true の場合、読み込みアニメーションはオンになり、それ以外の場合はオフになります。

概要

トランジション効果を使用すると、ページの切り替え、読み込み、操作時のユーザーエクスペリエンスを向上させ、ユーザーエンゲージメントと満足度を効果的に向上させることができます。トランジション効果を使用するときは、次の点に注意する必要があります: