رسوم CSS المتحركة بإطاراتها المفتاحية مع React

تصف قاعدة @keyframes حركة متعددة الخطوات من خلال تسمية قيم الخصائص عند نقاط مختلفة على خط زمني، باستخدام from وto أو نسب مئوية مثل 0% و50% و100%.

وعلى خلاف الانتقالات، يمكن للإطارات الرئيسية وصف حركة معقدة متعددة المراحل تعمل تلقائياً دون تغيير في الحالة عند كل خطوة.

تطبّق مجموعة من الإطارات الرئيسية باستخدام الخاصية animation: animation: slideIn 400ms ease forwards. وهي تجمع الاسم والمدة ودالة التوقيت ووضع الملء.

يحافظ وضع الملء forwards على بقاء العنصر عند قيم إطاره الرئيسي الأخير بعد انتهاء الحركة، ويمنع عودته المفاجئة إلى حالة البداية.

في React، تضيف عادةً فئة تتضمن تعريف animation عندما تصبح الحالة مفعّلة. فعلى سبيل المثال، يبدأ إضافة is-entering تشغيل الإطارات الرئيسية لحظة تركيب العنصر أو تبدّل العلامة.

يحافظ ذلك على منطق الحركة داخل CSS، بينما يقرر React ببساطة متى يضيف الفئة.

تتحكم الخاصية animation-fill-mode في الأنماط المطبقة قبل تشغيل الحركة وبعده. إذ يحتفظ forwards بالإطار الرئيسي الأخير، ويطبّق backwards الإطار الرئيسي الأول أثناء أي تأخير، بينما ينفذ both الأمرين معاً.

من دون forwards، سيعود العنصر الذي يتحرك إلى حالة الظهور بعد التلاشي إلى الاختفاء عند اكتمال الحركة.

يشغّل animation-direction: alternate الحركة إلى الأمام ثم إلى الخلف في كل تكرار. وعند دمجه مع animation-iteration-count: infinite، ينشئ حركة سلسة ذهاباً وإياباً تشبه تأثير النبض أو التنفس.

ويفيد ذلك في مؤشرات التحميل أو الحركات الخفيفة التي تجذب الانتباه.

يمكن أن تكون animation-play-state في حالة running أو paused. ويمكنكم التحكم فيها من خلال حالة React، مثل إيقاف شريط الأخبار المتحرك مؤقتًا عند تمرير المؤشر فوقه، وذلك بتبديل أحد الأصناف.

وبما أنها تتوقف مؤقتًا بدلًا من إعادة ضبطها، فإن الحركة تُستأنف من الموضع الذي توقفت عنده تمامًا.

تعمل حركة الإطارات الرئيسية مرة واحدة فقط عند تطبيق صنفها للمرة الأولى؛ وإعادة إضافة الصنف نفسه لا تعيد تشغيلها. والحيلة الأنظف في React هي تغيير key للعنصر، بحيث يعيد React تركيب عقدة جديدة فتُعاد الحركة من بدايتها.

فعلى سبيل المثال، تؤدي إضافة key={count} إلى إشعار منبثق إلى إعادة تركيبه في كل مرة تزداد فيها قيمة count.

يفعّل بعض المستخدمين تقليل الحركة في نظام التشغيل لأسباب تتعلق بالراحة أو سهولة الوصول. ضعوا الحركات غير الأساسية داخل @media (prefers-reduced-motion: reduce) وعطّلوها أو قصّروا مدتها هناك.

يؤدي احترام هذا التفضيل إلى جعل واجهتكم أكثر شمولًا، كما يتجنب التسبب في الشعور بعدم الارتياح.

لتحريك العناصر عند دخولها إلى إطار العرض، استخدموا IntersectionObserver داخل useEffect. وعندما يصبح العنصر المرصود مرئيًا، تضبطون الحالة، مما يضيف صنف الحركة.

ينتج عن ذلك تأثيرات ظهور أثناء التمرير من دون تشغيل مستمعي تمرير مكثفين في كل إطار.

تتحكم animation-delay في توقيت بدء كل حركة من حركات الإطارات الرئيسية، مما يتيح ترتيب بداياتها. وعند إعطاء قائمة من العناصر تأخيرات متزايدة، تتحرك بالتتابع لتظهر بطريقة منسقة.

يمكنكم حساب التأخير لكل عنصر في React باستخدام style={{ animationDelay: i * 80 + 'ms' }}.

استخدموا الانتقالات للتغييرات البسيطة بين حالتين التي يسببها تفاعل المستخدم، واستخدموا الإطارات الرئيسية عندما تحتاجون إلى حركة متعددة الخطوات أو تكرارية، أو إلى حركة تعمل باستقلال عن تبديل الحالة.

كلاهما مكتوب بلغة CSS خالصة، لذلك يحدد React فقط وقت إضافة الأصناف، بينما يتولى المتصفح معالجة الإطارات.

اختبروا مدى فهمكم لسلوك الإطارات الرئيسية.

تعلّمتم تعريف @keyframes وتطبيقها باستخدام الصيغة المختصرة animation، والتحكم في وضع الملء والاتجاه، وإيقاف الحركات مؤقتًا وإعادة تشغيلها، وإظهار العناصر أثناء التمرير باستخدام IntersectionObserver.

كما تعرّفتم إلى كيفية احترام prefers-reduced-motion لتوفير حركة ملائمة لاحتياجات سهولة الوصول.