Vueドキュメントにおけるページ切り替えトランジションエフェクト機能の応用-Vue.js-php.cn

Vueドキュメントにおけるページ切り替えトランジションエフェクト機能の応用

王林

リリース： 2023-06-20 09:01:44

オリジナル

1110 人が閲覧しました

Vue は、動的でインタラクティブな Web アプリケーションを構築するための人気のあるフロントエンド JavaScript フレームワークです。 Vue では、トランジション効果はページ切り替えの重要な部分です。ページ切り替えトランジション効果は、ページ切り替えにダイナミックでスムーズな感覚を追加し、ユーザーエクスペリエンスを向上させることができます。 Vue のドキュメントにはさまざまなトランジション効果関数が用意されていますが、この記事ではこれらの関数を Vue アプリケーションで使用する方法を紹介します。

トランジションクラス名

Vue におけるトランジションエフェクト機能は、要素の class 属性に特定のクラス名を追加することで実装されます。以下に、一般的な遷移クラス名をいくつか示します。

v-enter: 要素が挿入されたときに有効になり、遷移の開始状態を設定できます。
v-enter-active: 要素が挿入されたときに有効になり、トランジションプロセス中に適用されます。トランジションまたはアニメーションでは、トランジション効果の継続時間、遅延時間、アニメーション効果を定義するために使用されます。。
v-enter-to: 要素の挿入時に有効になり、遷移の終了状態を設定できます。
v-leave: 要素が削除されたときに有効になり、遷移の開始状態を設定できます。
v-leave-active: 要素が削除されたときに有効になり、移行プロセス中に適用されます。
v-leave-to: 要素が削除されたときに有効になり、遷移の終了状態を設定できます。

トランジション関数

Vue は、さまざまなニーズを満たすために複数のトランジション関数を提供します。一般的に使用される遷移関数の一部を以下に示します。

transition: 遷移する必要がある要素またはコンポーネントをラップします。ここで、name 属性は静的クラスのプレフィックスを指定します。
transition-group: 遷移する必要がある要素またはコンポーネントのリストをラップします。ここで、name 属性は静的クラスのプレフィックスを指定します。
動的トランジション関数: Vue では、ユーザーはトランジション関数をカスタマイズして、必要な効果を実現できます。動的な名前属性を遷移または遷移グループに渡すことができ、この名前属性を関数で返すことができます。

実践的なアプリケーション

Vue トランジション効果関数のアプリケーションをよりよく理解するために、以下では簡単な Vue アプリケーションを作成し、その中で使用します。エフェクト機能。ここでは、Vue CLI を使用して新しい Vue プロジェクトを作成します。まず、ターミナルで次のコマンドを実行します。

vue create my-app
cd my-app
npm run serve

ログイン後にコピー

次に、App.vue ファイルに次のコードを追加します。

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="toggle">Toggle message</button>
    <transition name="fade">
      <p v-if="messageShown">Hello, Vue!</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Vue transition demo',
        messageShown: false,
      }
    },
    methods: {
      toggle() {
        this.messageShown = !this.messageShown;
      },
    },
  }
</script>

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

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

ログイン後にコピー

上記のコードでは、ボタンと A を作成します。段落要素の Vue コンポーネント。ユーザーがボタンをクリックしたときに、段落要素が表示されている場合は非表示にし、そうでない場合は表示します。段落要素では、transition コンポーネントを使用し、name 属性の値として fade をトランジションコンポーネントに渡します。また、トランジションエフェクト機能の正式な実装として、styleタグ内に.fade-enter-active、.fade-leave-active、.fade-enter、.fade-leave-toクラスを定義しました。

最後に、ブラウザで Vue アプリケーションをプレビューできます。「メッセージの切り替え」ボタンをクリックすると、定義したトランジション効果関数を使用して、段落要素が消えたり滑らかに表示されたりします。

概要

Vue は、動的でスムーズなページ切り替え効果を実現する豊富なトランジション効果関数を提供します。上記で紹介したトランジション関数とトランジショングループ関数に加えて、Vue はさまざまなニーズに応えるために、より多くのトランジション効果関数と動的トランジション関数も提供します。トランジション機能を使用するプロセスでは、目的の効果を実現するためにトランジション効果の CSS スタイルを適切に定義する必要があります。

以上がVueドキュメントにおけるページ切り替えトランジションエフェクト機能の応用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。