Motion בייצור: אנימציות Layout ותבניות נגישות
Framer-motion השתנה. מאז סוף 2024, החבילה נקראת כעת Motion. עליכם להשתמש בנתיב הייבוא motion/react.
רוב המדריכים אינם מעודכנים. הם עדיין מציגים ייבואים ישנים וחסרים נגישות. המדריך הזה יעזור לכם להשתמש ב-Motion מודרני בפרויקטים אמיתיים.
השדרוג
המעבר הוא פשוט. אם אתם משתמשים בגרסה 11, המעבר לגרסה 12 הוא משימת "חפש והחלף".
- הסרה:
npm uninstall framer-motion - התקנה:
npm install motion - עדכון ייבואים: שנו את 'framer-motion' ל-'motion/react'
ניתן להריץ את שתי החבילות יחד במהלך הגירה. אל תתנו להן להישאר ב-codebase שלכם לנצח.
אנימציות Layout
ה-prop של layout אומר ל-Motion לעקוב אחר הגודל והמיקום של אלמנט. הוא מבצע אנימציה לשינויים במקום לאפשר לדפדפן "לקפוץ" (snap) למיקומים חדשים.
השתמשו ב-layout="position" עבור רשימות. זה מזיז אלמנטים שכנים (siblings) כאשר פריט גדל, אך לא דוחס את התוכן שבתוכו.
השתמשו ב-AnimatePresence עבור mounting ו-unmounting. בלעדיו, React מסיר אלמנטים מה-DOM לפני שהם מספיקים לבצע אנימציית יציאה.
הימנעו מאנימציה של height: auto. זה גורם לתקלות ויזואליות. במקום זאת, השתמשו בעטיפת CSS grid (מ-0fr ל-1fr) עבור שינויי גובה חלקים.
נגישות
כ-30% ממשתמשי iOS מפעילים את prefers-reduced-motion. אל תכבו פשוט את כל האנימציות. זה ישבור את ה-layout שלכם.
הדרך הלא נכונה: החלפת <motion.div> ב-<div> רגיל אם המשתמש מעוניין בפחות תנועה. זה גורם ל-layout "לקפוץ" ולהרגיש שבור.
הדרך הנכונה: הגבילו את ה-transition, לא את הקומפוננטה. שמרו על ה-<motion.div> אך הגדירו את ה-duration ל-0.
צרו custom hook כדי לנהל זאת:
- השתמשו ב-
useReducedMotionhook. - אם הוא true, החזירו duration של 0.
- אם הוא false, החזירו את הגדרות ה-spring הסטנדרטיות שלכם.
זה מבטיח שהאלמנטים עדיין יגיעו למיקומים הנכונים שלהם ללא התנועה.
מתי להשתמש ב-Motion
השתמשו ב-Web Animations API של הדפדפן עבור fades פשוטים. אין לו תלויות (dependencies).
השתמשו ב-Motion כשאתם צריכים:
- React-native APIs שמבינים את מחזור החיים (lifecycles) של הקומפוננטות.
- אנימציות Layout שעוקבות אחר שינויי DOM.
- AnimatePresence עבור אנימציות יציאה.
- פיזיקת spring שמרגישה טבעית.