此網站需要開啟JavaScript
JavaScript is required

動效

Vue Transition 的預設集、類似 AOS 的 GSAP 進場效果,以及六個獨立的動效範例。所有動效都會在 prefers-reduced-motion 時自動停用。

Transition 預設集

utils/transitions.js

九組寫好的 Vue Transition 屬性, 用 v-bind 一次帶入, 不用每次自己寫 enter / leave 的 class。

這些是 utils/ 底下的具名 export, 會自動 import,不需要寫 import 敘述。

換一個效果,再按切換數字

0

捲動進場

composables/useAosFadeIn.js

在 <script setup> 最上層呼叫 useAosFadeIn(), 然後在要淡入的元素加上 data-fade="in"。

元件卸載時會自動 kill ScrollTrigger, 並自動處理 prefers-reduced-motion —— 不用自己清理。

往下捲會看到方塊逐一淡入

獨立範例

這些範例需要整個畫面才看得出效果,所以獨立成頁。 每一頁都用 fullBleed 版型,不套文件的內距。