انتقالات CSS مع تغيّرات حالة React

يُجري انتقال CSS transition استيفاءً سلساً لخاصية بين قيمتين خلال مدة زمنية، بدلاً من الانتقال الفوري. وتعلنه على العنصر باستخدام transition: property duration timing-function delay.

في React، لا تقوم عادةً بتحريك القيم المضمّنة يدوياً. بدلاً من ذلك، تبدّل فئة أو نمطاً باستخدام الحالة، وتتولى CSS إنشاء الإطارات الوسيطة نيابةً عنك.

يتمثل النمط الشائع في الاحتفاظ بقيمة منطقية داخل useState وتبديل فئة CSS عند تغيّرها. فعندما تتغير الفئة، تحصل الخاصية المستهدفة على قيمة جديدة، وتحرك CSS الفرق بين القيمتين.

على سبيل المثال، تتحكم isOpen في امتلاك العنصر للفئة open، وتعيّن الفئة open ارتفاعاً أو تحويلاً مختلفاً.

يكون الإعداد المعتاد هو const [isVisible, setIsVisible] = useState(false). ويستدعي زر ما setIsVisible(v => !v) لقلب قيمتها.

يمنع استخدام المُحدّث الوظيفي v => !v الاعتماد على حالة قديمة عند تكدّس عدة تحديثات معاً، مما يحافظ على موثوقية التبديل.

تنشئ className ديناميكياً: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. وتحتوي الفئة الأساسية على تعريف الانتقال، بينما تحتوي فئات التعديل على قيمتي البداية والنهاية.

يضمن إبقاء transition في الفئة الأساسية الموجودة دائماً عمل الحركة في الاتجاهين، عند الفتح والإغلاق.

يمكنك تحريك عدة خصائص في الوقت نفسه من خلال إدراجها: transition: transform 300ms ease, opacity 300ms ease. ويجمع تأثير التلاشي والانزلاق بين تغيير في opacity وتغيير translateY ضمن transform.

يؤدي تحريكهما معاً إلى ظهور متقن، إذ ينزلق العنصر إلى أعلى أثناء تلاشي ظهوره.

يؤخر transition-delay بدء الانتقال. ومن خلال منح عناصر القائمة تأخيرات متزايدة، تنشئ تتابعاً متدرجاً يتحرك فيه كل عنصر بعد العنصر السابق بقليل.

في React، يمكنك حساب التأخير داخل السمة، مثلاً باستخدام style={{ transitionDelay: index * 50 + 'ms' }}.

لا يمكن تحريك الخاصية display لأنها لا تملك قيماً وسيطة بين none وblock. ويؤدي إجراء انتقال عليها إلى قفزة فورية، لا إلى تلاشي.

بدلاً من ذلك، حرّك opacity لإنشاء التلاشي المرئي، وبدّل pointer-events: none حتى يتجاهل العنصر المخفي النقرات أثناء عدم ظهوره.

تحدد دالة التوقيت كيفية تغيّر السرعة خلال مدة الحركة. تتحرك linear بسرعة ثابتة، وتبدأ ease وتنتهي ببطء، بينما تتيح لك cubic-bezier(...) تعريف منحنى مخصص بالكامل.

تُعد المنحنيات المخصصة مناسبة جداً لإضفاء إحساس سريع الاستجابة أو نابض، مثل cubic-bezier(0.34, 1.56, 0.64, 1) لإنشاء تجاوز بسيط.

يمكنك تخزين المدد في خصائص CSS مخصصة مثل --speed: 300ms وإعادة استخدامها: transition: opacity var(--speed) ease. ويحافظ ذلك على اتساق التوقيت بين المكوّنات.

يمكن لـ React أيضاً تعيين المتغير داخل السمة باستخدام style={{ '--speed': '500ms' }}، مما يتيح للخصائص التحكم في توقيت الحركة.

يمكن للمتصفحات تحريك transform وopacity على مركّب GPU دون إعادة حساب التخطيط أو إعادة الرسم. أما تحريك خصائص مثل width أو top أو margin فيفرض أعمال تخطيط في كل إطار، وقد يؤدي إلى تقطّع الحركة.

عندما تحتاج إلى التحريك أو تغيير الحجم أو التدوير، استخدم transform؛ وعندما تحتاج إلى التلاشي، استخدم opacity.

يجمع الانتقال الموثوق في React بين حالة منطقية، وفئة تعديل شرطية، وفئة أساسية تعلن transition على خصائص ملائمة لوحدة معالجة الرسوميات. تقلب الحالة الفئة، وتتولى CSS تنفيذ الحركة.

يحافظ ذلك على مكوّناتك بصيغة تصريحية، مع الاستفادة من المتصفح لإنتاج حركة سلسة.

اختبر مدى فهمك للتحريك عالي الأداء.

تعلمت تشغيل انتقالات CSS عبر تبديل الفئات التي تقودها الحالة، وتحريك transform وopacity معاً، وإنشاء تتابع متدرج باستخدام التأخيرات، وتجنب إجراء انتقال على display باستخدام opacity مع pointer-events.

كما تعرّفت إلى دوال التوقيت، والمدد المعتمدة على متغيرات CSS، وسبب حفاظ الخصائص التي يركّبها GPU على سلاسة الحركة.