摘要

<Transition> 元件提供了一系列的 JavaScript 事件鉤子，讓我們可以完全透過 JavaScript 來控制動畫的整個過程，實現最大的靈活性。

定義與說明

我們可以監聽 <Transition> 上的事件，如 @before-enter、@enter、@after-enter 等。在這些事件的回呼函式中，我們可以存取到動畫元素，並使用 JavaScript（或 GSAP、Anime.js 等函式庫）來直接操作其樣式，實現動態的、可程式化的動畫。

實作範例

JavaScript 鉤子示例

<template>
  <Transition
    @enter="onEnter"
    :css="false" <!-- 告訴 Vue 不用偵測 CSS 動畫 -->
  >
    <div v-if="show">...</div>
  </Transition>
</template>

<script setup>
function onEnter(el, done) {
  // 使用 GreenSock 動畫函式庫
  gsap.to(el, {
    duration: 0.5,
    x: 100,
    onComplete: done // 動畫完成後必須呼叫 done()
  });
}
</script>

結論

JavaScript 鉤子為動畫提供了無限的可能性。當 CSS 無法滿足需求，或需要與第三方動畫函式庫深度整合時，它就是我們的終極武器。

JavaScript 鉤子 GSAP 動畫函式庫