摘要

我們可以非常輕鬆地將像 Animate.css 這樣的第三方 CSS 動畫函式庫，與 Vue 的 <Transition> 元件結合使用，快速實現豐富的動畫效果。

定義與說明

<Transition> 提供了 enter-active-class 和 leave-active-class 等屬性，讓我們可以直接指定在動畫的不同階段要應用的 CSS class 名稱。我們只需要將 Animate.css 提供的 class 名稱（如 animate__bounceInUp）賦值給這些屬性即可。

實作範例

Animate.css 結合示例

<!-- 需先引入 Animate.css -->
<template>
  <Transition
    appear
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <h1 v-if="show">Animate.css!</h1>
  </Transition>
</template>

結論

結合外部 CSS 動畫函式庫是快速為 Vue 應用添加專業級動畫的捷徑。透過自訂 class 屬性，<Transition> 與這些函式庫可以無縫整合。

Animate.css 外部函式庫自訂 class