تحريكات الدخول والخروج دون مكتبة

عند العرض بشكل مشروط باستخدام {show && }، يزيل React العنصر من DOM فور أن تصبح قيمة show هي false. ولا يتوفر وقت لحركة الخروج، لأن العقدة تكون قد اختفت بالفعل.

حركات الدخول سهلة، أما حركات الخروج فهي التحدي الحقيقي.

أبسط حل هو عدم إزالة التركيب مطلقًا. أبقوا العنصر معروضًا، وحرّكوا opacity إلى الصفر مع ضبط pointer-events: none عند إخفائه، ثم أعيدوه إلى القيمة واحد عند إظهاره.

يوفر ذلك تلاشيًا سلسًا في الاتجاهين، على حساب بقاء العنصر في DOM.

لإزالة التركيب فعليًا، صمّموا آلة حالات صغيرة بمراحل مثل mounting وmounted وunmounting وunmounted. ولا تزيلوا العقدة إلا بعد انتهاء حركة الخروج.

تحدد الحالة أصناف الحركة التي تُطبّق في كل مرحلة.

يمكنكم تغليف الآلة في خطاف مخصص يُسمى غالبًا useMount. يأخذ الخطاف حالة الظهور المطلوبة، ويعيد ما إذا كان ينبغي أن يكون العنصر موجودًا في DOM، إلى جانب مرحلته الحالية.

وتبقى المكوّنات بسيطة، لأن منطق التوقيت يكون داخل الخطاف القابل لإعادة الاستخدام.

استنادًا إلى الاصطلاحات الشائعة، طبّقوا enter ثم enter-active عند التركيب، وexit ثم exit-active عند الإزالة. يحدد الصنف الأساسي حالة البداية، بينما يحدد الصنف النشط حالة النهاية مع وجود انتقال.

ويؤدي التبديل بينهما في الإطار المناسب إلى تشغيل الحركة.

لمعرفة وقت انتهاء حركة الخروج، استمعوا إلى حدث transitionend على العنصر. وعند إطلاقه لحركة الخروج، غيّروا الحالة إلى unmounted وأزيلوا العقدة.

يربط ذلك إزالة التركيب بنهاية الحركة المرئية بدقة، بدلًا من الاعتماد على مهلة زمنية تقديرية.

يمكنكم تغليف كل ذلك في مكوّن Transition يقبل خاصية in والعناصر الفرعية. فهو يُبقي العناصر الفرعية مركبة طوال حركة الخروج، ويطبّق الأصناف المناسبة لكل مرحلة.

ولا يحتاج مستخدمو المكوّن إلا إلى تبديل in، ليحصلوا تلقائيًا على حركتي دخول وخروج صحيحتين.

هناك تفصيل دقيق: يجب أن تتيحوا للمتصفح رسم صنف البداية قبل إضافة الصنف النشط، وإلا فسيقفز العنصر من دون انتقال. ويضمن استخدام requestAnimationFrame أو فرض إعادة التدفق بين الصنفين تشغيل الانتقال فعليًا.

وهذا يضمن تسجيل المتصفح لقيم البداية أولًا.

توفر مكتبة react-transition-group مكوّنَي Transition وCSSTransition اللذين يطبّقان هذا النمط تمامًا، بما في ذلك دورة حياة الأصناف وتوقيت إزالة التركيب.

تعكس نسختكم المبنية يدويًا أفكارها الأساسية، مما يجعل فهم المكتبة سهلًا بعد بناء نسخة منها بأنفسكم.

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

اختاروا الحل بناءً على مقدار تعقيد الحركة الذي يحتاجه تطبيقكم فعليًا.

تتطلب حركات الخروج إبقاء العنصر موجودًا حتى تكتمل حركته، سواء بعدم إزالة تركيبه مطلقًا، أو باستخدام آلة حالات مع transitionend، أو بالاستعانة بمكتبة.

يتيح لكم فهم الآلية اختيار أخف حل يلبي احتياجاتكم.

اختبروا مدى فهمكم لحركات الخروج.

تعلّمتم سبب صعوبة حركات الخروج، وحلين لها، هما الإبقاء على العنصر مركبًا وآلة حالات للتركيب، وكيف يحدد transitionend توقيت إزالة التركيب، وكيفية بناء مكوّن Transition قابل لإعادة الاستخدام.

كما تعرّفتم إلى الحالات التي يُفضّل فيها استخدام react-transition-group بدلًا من التنفيذ اليدوي.