VUE3 の基本チュートリアル: Vue.js のトランジションとアニメーションの使用-Vue.js-php.cn

VUE3 の基本チュートリアル: Vue.js のトランジションとアニメーションの使用

PHPz

リリース： 2023-06-16 10:31:42

オリジナル

1058 人が閲覧しました

Vue.js はユーザーインターフェイスを構築するための進歩的なフレームワークであり、トランジションやアニメーションの実装が非常に便利です。この記事では、トランジションイベントのスタイル設定やトリガー方法など、Vue.js のトランジションとアニメーションの使用方法について説明します。

トランジション

Vue.js では、トランジションとは、要素が挿入、更新、または削除されるときに要素にアニメーション効果を追加することを指します。 Vue.js は、v-transition ディレクティブと遷移コンポーネントを通じて遷移を実装します。

v-transition ディレクティブ

v-transition ディレクティブは、要素が挿入、更新、または削除されたときに、対応するトランジション効果をトリガーします。トランジションクラス名を設定することでトランジション効果を定義できます。たとえば、要素が挿入されるときにフェードインし、要素が削除されるときにフェードアウトすることができます。

<div v-transition="'fade'">
  {{ message }}
</div>

ログイン後にコピー

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

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

ログイン後にコピー

上の例では、要素のトランジション効果を表す .fade クラス名を定義しました。 .fade-enter クラスと .fade-leave-to クラスでは、不透明度属性を 0 に設定し、要素の挿入時と削除時の開始状態と終了状態を示します。 .fade-enter-active クラスと .fade-leave-active クラスでは、トランジションが有効になる時間を示すトランジション属性を設定します。

トランジションコンポーネント

トランジションコンポーネントを使用すると、v トランジションの使用を簡素化できます。トランジションコンポーネントにトランジションしたい要素を配置するだけです。たとえば、異なるコンポーネント名を使用して、開始、終了、および同時のトランジションエフェクトを定義できます。

<transition enter-active-class="fadeIn" leave-active-class="fadeOut">
  <div v-show="showDiv">{{ message }}</div>
</transition>

ログイン後にコピー

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

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

.fadeOut-leave, .fadeIn-enter-to {
  opacity: 1;
}

ログイン後にコピー

上の例では、トランジションコンポーネントを使用して、トランジションエフェクトのセットアップを簡素化しています。 enter-active-class プロパティと Leave-active-class プロパティを設定することで、開始と終了の遷移効果を定義します。同時に、フェードインとフェードアウトのクラス名を設定することで、要素の開始状態と終了状態を定義します。

アニメーション

Vue.js では、アニメーション (アニメーション) とは、要素が挿入、更新、または削除されていないときに要素にアニメーション効果を追加することを指します。 Vue.js は、v-animation ディレクティブとアニメーションコンポーネントを通じてアニメーションを実装します。

v-animation ディレクティブ

v-animation ディレクティブは、要素が挿入、更新、または削除されていないときに、対応するアニメーション効果をトリガーします。アニメーションクラス名を設定することでアニメーション効果を定義できます。たとえば、マウスがホバーしているときに要素を拡大縮小できます。

<div v-animation="'hoverScale'">
  {{ message }}
</div>

ログイン後にコピー

.hoverScale {
  transform: scale(1);
}

.hoverScale:hover {
  transform: scale(1.5);
}

ログイン後にコピー

上の例では、要素のアニメーション効果を表す .hoverScale クラス名を定義しました。 .hoverScale クラスでは、要素の開始状態が元のサイズであることを示すために、transform 属性を設定します。 .hoverScale:hover クラスでは、transform プロパティを 1.5 倍に拡大するように設定し、要素の終了状態を示します。

アニメーションコンポーネント

アニメーションコンポーネントを使用すると、v-animation の使用を簡素化できます。アニメーション化したい要素をアニメーションコンポーネントに配置するだけです。たとえば、さまざまなコンポーネント名を使用してさまざまなアニメーション効果を定義できます。

<animation name="rotate">
  <div>{{ message }}</div>
</animation>

ログイン後にコピー

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.rotate {
  animation: rotate 1s infinite;
}

ログイン後にコピー

上の例では、アニメーションコンポーネントを使用してアニメーション効果の設定を簡素化します。 name 属性を設定することで、アニメーション名を回転として定義します。 .rotate クラスでは、アニメーションプロパティを設定し、アニメーションのプロパティと期間を定義します。 @keyframes で、アニメーションの開始状態と終了状態を設定します。

概要

Vue.js は、ユーザーインターフェイスに鮮やかな効果を追加できる便利なトランジションおよびアニメーション機能を提供します。 v-transition ディレクティブとtransitionコンポーネントを使用すると、要素が挿入、更新、または削除されたときのトランジション効果を定義できます。 v-animation ディレクティブとアニメーションコンポーネントを使用すると、要素が挿入、更新、または削除されないときのアニメーション効果を定義できます。このチュートリアルが Vue.js のトランジションとアニメーションを学ぶのに役立つことを願っています。

以上がVUE3 の基本チュートリアル: Vue.js のトランジションとアニメーションの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。