auto-animate

SKILL.md

Status: Production Ready ✅ Last Updated: 2025-11-07 Dependencies: None (works with any React setup) Latest Versions: @formkit/auto-animate@0.9.0

Issue #1: SSR/Next.js Import Errors Error: "Can't import the named export 'useEffect' from non EcmaScript module" Source: https://github.com/formkit/auto-animate/issues/55 Why It Happens: AutoAnimate uses DOM APIs not available on server Prevention: Use dynamic imports (see templates/vite-ssr-safe.tsx)

Issue #2: Conditional Parent Rendering Error: Animations don't work when parent is conditional Source: https://github.com/formkit/auto-animate/issues/8 Why It Happens: Ref can't attach to non-existent element Prevention:

經過生產測試的 AutoAnimate 設置 (@formkit/auto-animate) - 零配置、嵌入式動畫庫 當添加、刪除或移動 DOM 元素時，它會自動添加平滑過渡。這個技能應該 在構建需要簡單、自動動畫的列表、手風琴、toast 或表單驗證的 UI 時使用 消息沒有完整動畫庫的複雜性。 使用場合：向動態列表添加平滑的動畫、構建過濾/排序界面、創建手風琴組件、 實現 toast 通知、動畫表單驗證消息、需要簡單的過渡而無需動畫代碼， 使用 Vite + React + Tailwind，部署到 Cloudflare Workers 靜態資產，或遇到 SSR 錯誤 動畫庫。 關鍵詞：自動動畫、@formkit/auto-animate、formkit、零配置動畫、自動動畫、插入動畫、 列表動畫、手風琴動畫、吐司動畫、表單驗證動畫、輕量級動畫、2kb 動畫、 喜歡減少運動、可訪問的動畫、vite 反應動畫、cloudflare 工人動畫、ssr 安全動畫 來源：jackspace/claudeskillz。

查看原文