Animatee 簡介：您的新 Vue.js 動畫伴侶

大家好！

我很高興向您介紹 Animate4vue，這是一個新庫，它將讓您輕鬆有趣地向 Vue.js 專案添加動畫！

什麼是 Animate4vue？

Animate4vue 是一個庫，旨在透過精美的動畫讓您的 Vue.js 應用程式栩栩如生。它提供了 100 多種使用 GSAP 製作的高效能 UI 動畫，這意味著它們流暢且高效。借助 GPU 加速，您的動畫在從高端到低端的任何裝置上都會看起來很棒。

為什麼要用 Animate4vue？

• 即用型動畫：您可以獲得超過 100 個預製動畫，因此您不必從頭開始創建它們。
• 高效能：由於 GSAP 和 GPU 加速，您的動畫將運行流暢且看起來棒極了。
• 輕鬆整合： 只需安裝即可開始！
• TypeScript 支援： 如果您使用 TypeScript，您會發現它是完全類型化的，這使得編碼更容易、更安全。
• Tree-Shaking： 只有您使用的動畫才會包含在您的包中，以保持輕鬆。

如何開始

1. 安裝 Animate4vue：
   開啟終端機並運作：
   

   npm install animate4vue
   

   或
   

   yarn add animate4vue
   

2. 基本用法：

將動畫整合到 Vue 元件中的主要方法有兩種：

• 使用 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中文網其他相關文章！