動效
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 版型,不套文件的內距。
