Vue3のアニメーション機能：クールなアニメーション効果を実現

Vue3 は Vue の最新バージョンであり、アニメーションに関しても大幅に改善および更新されています。 Vue3 のアニメーション機能は、Composition API と Transition コンポーネントを使用して実装されており、開発者はさまざまなクールなアニメーション効果をより簡単に実現できます。

1. コンポジション API

コンポジション API は Vue3 に導入された新機能で、コンポーネントの可読性、保守性、再利用性を最適化できます。 Comboposition API では、ref と reactive を使用して応答性の高いデータを作成し、watchEffect と computed を使用して変数や計算されたプロパティの変更を監視し、onMounted と onUnmounted を使用してライフサイクル フック関数を実行できます。

アニメーションに関しては、Composition API は useAnimation と useTransition という 2 つの関数を提供します。

1. useAnimation

useAnimation 関数を使用すると、コンポーネント内にアニメーション関数を作成して、複雑なアニメーション ロジックを処理できます。その基本的な構文は次のとおりです。

import { useAnimation } from 'vue';

export default {
  setup() {
    const {animate, stop} = useAnimation();
    
    return {
      animate,
      stop
    }
  }
}

useAnimation から返された関数を使用して、一連のアニメーション キーフレームを作成し、animate 関数を通じてこれらのアニメーションを実行できます。たとえば、次のようなスケーリングアニメーションを作成できます:

const { animate, stop } = useAnimation();
  
const scale = animate({
  0: {
    transform: 'scale(1)',
  },
  0.5: {
    transform: 'scale(1.2)',
  },
  1: {
    transform: 'scale(1)',
  },
}, {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate',
});

この例では、animate関数を使用してスケーリングアニメーションを作成します。キーフレームのtransform属性を指定することで、要素を拡大および縮小できます。 。 animate 関数の 2 番目のパラメータでは、アニメーションの継続時間、イージング関数、反復回数、再生方向を設定できます。このようにして、Vue コンポーネントにズーム アニメーション効果を実装できます。

2. useTransition

useTransition 関数を使用すると、要素の出入り時にいくつかの遷移アニメーション操作を実行できます。その基本的な構文は次のとおりです:

import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    return {
      enter,
      leave
    }
  }
}

enter 関数と Leave 関数を使用すると、要素の開始動作と終了動作にさまざまなアニメーション トランジション効果を設定できます。たとえば、次の例では、フェードインを設定します。効果:

<template>
  <div :class="{'opacity-0': !show}" v-enter="fadeIn" v-leave="fadeOut"></div>
</template>

<script>
import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    const fadeIn = enter((el, done) => {
      el.style.opacity = '0';
      setTimeout(() => {
        el.style.opacity = '1';
        done();
      }, 1000)
    });

    const fadeOut = leave((el, done) => {
      el.style.opacity = '1';
      setTimeout(() => {
        el.style.opacity = '0';
        done();
      }, 1000)
    });

    return {
      fadeIn,
      fadeOut,
      show: true
    }
  }
}
</script>

この例では、要素の開始時と終了時にそれぞれ fadeIn 関数と fadeOut 関数を実行し、異なるフェードインおよびフェードアウトのトランジション効果を実行します。コールバック関数。コールバック関数では、setTimeout 関数を使用してアニメーションの実行を遅延し、done パラメーターを使用してアニメーションが完了したかどうかを識別することで、アニメーションのトランジション効果を実現できます。

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

Composition API によって提供されるアニメーション関数に加えて、Vue3 は、フェードインやフェードなどの基本的なトランジション アニメーション効果を実現するのに役立つトランジション コンポーネントも提供します。外側、左 スライド、上にスライド、回転など。その基本的な構文は次のとおりです。

<transition name="fade">
  <div v-if="show">HELLO VUE3</div>
</transition>

トランジション コンポーネントでは、フェード、左スライド、スライドアップ、回転などのさまざまなトランジション アニメーション効果を使用するために、さまざまな名前の値を指定できます。 Vue3 では、多くのトランジション効果がデフォルトで提供されており、名前の値を設定することで実現できます。たとえば、次の例を使用して、単純なフェードインおよびフェードアウトのアニメーション効果を実装できます。

<template>
  <div>
    <button @click="show = !show">Show/Hide</button>
    <hr>
    <transition name="fade">
      <p v-if="show">Hello Vue3</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

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

この例では、name を fade に設定することで、フェードインおよびフェードアウトの効果を実現します。要素の表示と非表示を制御する show The 値を動的に変更します。アニメーション効果では、CSS3 のトランジション属性を使用してトランジションのアニメーション効果を設定し、.fade-enter-active および .fade-leave-active を通じてアニメーションの長さとイージング関数を設定し、アニメーションの長さを設定し、 .fade-enter および .fade -leave-to によるイージング関数は、アニメーションの開始時と終了時の状態を設定します。

概要:

Vue3 では、アニメーション関数とトランジション コンポーネントは、アニメーション効果を実現する 2 つの一般的な方法です。前者はより柔軟で自由であり、より複雑なアニメーション ロジックを処理できます。後者はよりシンプルで使いやすく、いくつかの基本的なトランジション アニメーション効果に適しています。どの方法を使用する場合でも、CSS3 のプロパティと関数を使用して、さまざまなクールなアニメーション効果を実現し、アプリケーションに生き生きとした色を追加できます。

以上がVue3のアニメーション機能：クールなアニメーション効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。