auto-animate

Package: @formkit/auto-animate@0.9.0 (Sept 2025) Frameworks: React, Vue, Solid, Svelte, Preact Last Updated: 2025-11-22

Why this matters: Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server.

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)

رسوم متحركة بدون تكوين لـ React وVue وSolid وSvelte وPreact باستخدام @formkit/auto-animate (3.28 كيلو بايت). يمنع أكثر من 10 أخطاء موثقة: عمليات استيراد SSR/Next.js، والأصول الشرطية، والمفاتيح المفقودة، وعرض flexbox، عرض الجدول، تكوين Jest/esbuild، تعارض مواضع CSS، تسجيل Vue/Nuxt، Angular ESM. يُستخدم عندما: تحريك القوائم/الأكورديونات/الخبز المحمص/النماذج، واستكشاف أخطاء الرسوم المتحركة SSR وإصلاحها، والحاجة رسوم متحركة يمكن الوصول إليها (التفضيل التلقائي للحركة المخفضة)، أو تريد انتقالات منسدلة بدون حركة زائدة. المصدر: ovachiever/droid-tings.