ホームページ > 記事 > ウェブフロントエンド > Vue3のアニメーション機能:クールなアニメーション効果を実現
Vue3 は Vue の最新バージョンであり、アニメーションに関しても大幅に改善および更新されています。 Vue3 のアニメーション機能は、Composition API と Transition コンポーネントを使用して実装されており、開発者はさまざまなクールなアニメーション効果をより簡単に実現できます。
1. コンポジション API
コンポジション API は Vue3 に導入された新機能で、コンポーネントの可読性、保守性、再利用性を最適化できます。 Comboposition API では、ref と reactive を使用して応答性の高いデータを作成し、watchEffect と computed を使用して変数や計算されたプロパティの変更を監視し、onMounted と onUnmounted を使用してライフサイクル フック関数を実行できます。
アニメーションに関しては、Composition API は useAnimation と useTransition という 2 つの関数を提供します。
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 コンポーネントにズーム アニメーション効果を実装できます。
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 サイトの他の関連記事を参照してください。