動畫
規則
- 使用 Framer Motion 為 React 實作動畫 — 使用
motion.div搭配initial、animate、exitprops - 使用
AnimatePresence處理掛載/卸載動畫 — 包裹條件式渲染內容 - 使用
layout屬性實現自動佈局動畫（重新排序、調整大小） - 捲軸動畫：使用
useScroll()+useTransform()實現視差效果和捲軸觸發的顯示動畫 - 尊重減少動畫偏好：使用
useReducedMotion()鉤子 — 停用非必要的動畫 - 子元素錯開動畫：使用含有
staggerChildren的variants實現列表動畫 - 效能最佳化：僅動畫化
transform和opacity— 切勿動畫化width、height、margin - 保持動畫時長簡短：UI 過渡動畫 200-400ms，頁面轉場動畫 400-800ms
避免
- 動畫化佈局屬性（width、height、top、left）— 應使用
transform: translate/scale - UI 互動動畫超過 1 秒 — 會造成遲滯感
- 未經使用者觸發自動播放動畫 — 會導致迷失方向
- 忽略
prefers-reduced-motion— 這是無障礙功能的必要條件