auto-animate

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 أو إزالتها أو نقلها. ينبغي لهذه المهارة يمكن استخدامها عند إنشاء واجهات مستخدم تحتاج إلى رسوم متحركة بسيطة وتلقائية للقوائم أو الأكورديون أو الخبز المحمص أو التحقق من صحة النموذج الرسائل دون تعقيد مكتبات الرسوم المتحركة الكاملة. يُستخدم عندما: إضافة رسوم متحركة سلسة إلى القوائم الديناميكية، وإنشاء واجهات التصفية/الفرز، وإنشاء مكونات الأكورديون، تنفيذ إشعارات الخبز المحمص، وتحريك رسائل التحقق من صحة النموذج، والحاجة إلى انتقالات بسيطة بدون رمز الرسوم المتحركة، العمل مع Vite + React + Tailwind، أو النشر إلى Cloudflare Workers Static Assets، أو مواجهة أخطاء SSR مع مكتبات الرسوم المتحركة. الكلمات الرئيسية: التحريك التلقائي، @formkit/auto-animate، formkit، الرسوم المتحركة ذات التكوين الصفري، الرسوم المتحركة التلقائية، الرسوم المتحركة المنسدلة، الرسوم المتحركة القائمة، الرسوم المتحركة الأكورديون، الرسوم المتحركة نخب، الرسوم المتحركة التحقق من صحة النموذج، الرسوم المتحركة خفيفة الوزن، الرسوم المتحركة 2 كيلو بايت، تفضيلات الحركة المنخفضة، الرسوم المتحركة التي يمكن الوصول إليها، الرسوم المتحركة التفاعلية، الرسوم المتحركة لعمال Cloudflare، الرسوم المتحركة الآمنة ssr المصدر: jackspace/claudeskillz.