Animatee の紹介: 新しい Vue.js アニメーション コンパニオン

皆さん、こんにちは！

Vue.js プロジェクトにアニメーションを簡単かつ楽しく追加できる新しいライブラリである Animate4vue をご紹介できることを嬉しく思います!

Animate4vue とは何ですか?

Animate4vue は、Vue.js アプリケーションに美しいアニメーションをもたらすように設計されたライブラリです。 GSAP で作成された 100 を超える高性能 UI アニメーションが提供されており、スムーズで効率的です。 GPU アクセラレーションにより、ハイエンドからローエンドまで、どのデバイスでもアニメーションが美しく表示されます。

Animate4vue を使用する理由

• すぐに使えるアニメーション: 100 を超える既製のアニメーションが用意されているため、最初から作成する必要はありません。
• 高性能: GSAP と GPU アクセラレーションのおかげで、アニメーションはスムーズに実行され、見た目も素晴らしくなります。
• 簡単な統合: インストールするだけで準備完了です!
• TypeScript のサポート: TypeScript を使用すると、完全に型指定されていることがわかり、コーディングがより簡単かつ安全になります。
• ツリーシェイキング: 使用するアニメーションのみがバンドルに含まれ、内容が軽くなります。

開始方法

1. Animate4vue をインストールします:
   ターミナルを開いて次を実行します:
   

   npm install animate4vue
   

   ログイン後にコピー

   または
   

   yarn add animate4vue
   

   ログイン後にコピー

2. 基本的な使用法:

アニメーションを Vue コンポーネントに統合するには、主に 2 つの方法があります:

• Vue のトランジション コンポーネントの使用:
  

   <template>
     <Transition @enter="puffIn" @leave="puffOut">
       <div v-if="show">Content Here</div>
     </Transition>
   </template>
  
   <script setup>
   import { puffIn, puffOut } from 'animate4vue';
   </script>
  

  ログイン後にコピー

  

• 関数呼び出しの使用:
  

    <script setup>
    import { zoomIn, zoomOut } from 'animate4vue';
  
    const animateIn = (el, done) => {
      zoomIn(el, done)
    }
  
    const animateOut = (el, done) => {
      zoomOut(el, done)
    }
  
    // The 'done' argument is used to signal Vue about the animation state and trigger appropriate actions.
    </script>
  
    <template>
      <Transition @enter="animateIn" @leave="animateOut">
        <div v-if="show">....</div>
      </Transition>
    </template>
  

  ログイン後にコピー

  

プロジェクトでアニメーションの力を探ってみましょう:

利用可能なアニメーションの完全なリスト、詳細なドキュメント、使用例については、Animate4vue GitHub リポジトリにアクセスしてください。

Animate4vue で Vue.js プロジェクトに命を吹き込み、魅力的なユーザー エクスペリエンスを作成しましょう!

以上がAnimatee の紹介: 新しい Vue.js アニメーション コンパニオンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。