トランジション クラス名を使用して Vue でアニメーション トランジション効果を実現する方法

Vue は、Web アプリケーション開発を簡素化するために設計された人気のある JavaScript フレームワークです。その中でも、遷移クラス名は非常に重要な機能であり、DOM 要素の追加、削除などの動作で遷移アニメーション効果を実現することができます。この記事では、Vue で遷移クラス名を使用して、Web アプリケーションに豊かなアニメーション エクスペリエンスをもたらす方法を学びます。

Vue トランジション クラス名は何ですか?

Vue のトランジション クラス名は、Vue ライブラリで定義された CSS クラス名のセットです。これらのクラス名は、フェードイン、フェードアウト、ズームイン、ズームアウトなどの事前定義された CSS トランジション アニメーション効果を提供します。 Vue の遷移クラス名では、次のキーワードを使用できます:

• v-enter: DOM 要素が挿入される前の初期状態。
• v-enter-active: DOM 要素挿入後のアニメーション実行処理。
• v-enter-to: DOM 要素が挿入された後の終了状態。
• v-leave: DOM 要素が削除される前の初期状態。
• v-leave-active: DOM 要素が削除された後のアニメーション実行プロセス。
• v-leave-to: DOM 要素が削除された後の終了状態。

これらのクラス名を使用すると、特に Vue のリストや条件付きレンダリングで、DOM 要素にアニメーション効果を簡単に追加および削除できます。

Vue 遷移クラス名の使用方法

Vue では、v-bind ディレクティブと v-on ディレクティブを使用して要素に遷移クラス名を簡単に追加できます。以下では、Vue でこれら 2 つの命令を使用する方法を紹介します。

v-bind ディレクティブを使用して遷移クラス名を追加する

v-bind ディレクティブを使用すると、オブジェクトを要素にバインドし、オブジェクトを通じて遷移クラス名を追加できます。トランジション効果を実現するには、要素にキー属性を追加する必要があります。これは、Vue が要素の状態を追跡できるように一意である必要があります。たとえば、次のコード:

<template>
  <div>
    <transition name="fade">
      <p v-if="show" key="message">Hello World!</p>
    </transition>
    <button v-on:click="toggleShow">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
}
</script>

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

上記のコードでは、Vue のトランジション コンポーネントを使用してトランジション効果を有効にしています。トランジションコンポーネントでは、CSS -leave-active で .fade-enter、.fade-enter-active、.fade-enter-to、.fade-leave、.fade を使用できるように、「fade」という名前のトランジションを定義します。 、.fade-leave-これらのクラス名に。 p 要素の v-if ディレクティブを使用して、p 要素が表示されるかどうかを制御し、key 属性を使用してそのステータスを追跡します。 CSS では、トランジション アニメーションの実行時間を設定するために使用される 2 つのクラス名 fade-enter-active と fade-leave-active を定義します。 fade-enter と fade-leave-to の機能は、それぞれ挿入時と削除時の要素の開始状態と終了状態を指定することです。

v-on ディレクティブを使用して遷移クラス名を追加する

v-on ディレクティブを使用すると、イベント リスニングを通じて要素に遷移クラス名を追加できます。たとえば、次のコード:

<template>
  <div>
    <transition name="scale">
      <button v-if="visible" v-on:click="hide">Hide</button>
    </transition>
    <button v-else v-on:click="show">Show</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
  },
}
</script>

<style>
.scale-enter-active, .scale-leave-active {
  transition: transform .5s;
}
.scale-enter, .scale-leave-to {
  transform: scale(0);
}
</style>

上記のコードでは、v-on ディレクティブを使用して、ボタンを表示または非表示にするクリック イベントをバインドします。ボタンが表示されると、Vue のトランジション コンポーネントを使用して、「スケール」という名前のトランジション効果をボタンに追加します。 CSS では、.scale-enter-active と .scale-leave-active という 2 つのクラス名を定義します。これらは、トランジション アニメーションの実行時間を制御するために使用されます。また、.scale-enter と .scale-leave-to という 2 つのクラス名も定義します。これらは、要素の挿入時と削除時に要素の開始状態と終了状態を指定するために使用されます。

概要

Vue の遷移クラス名は、DOM 要素の遷移アニメーション効果を実現するためのシンプルかつ強力な方法を提供します。 v-bind および v-on ディレクティブを使用して、これらのクラス名を要素にバインドし、CSS を通じて要素の遷移効果を制御できます。 Vue のトランジション クラス名とアニメーション効果に慣れていない場合は、Vue のトランジション クラス名をよりよく習得できるように、さらに演習や実験を行うことをお勧めします。

以上がトランジション クラス名を使用して Vue でアニメーション トランジション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。