في الداشبورد، قائمة جانبية فيها مجموعة. لما تدوس، العناصر اللي تحتها بتظهر وتختفي بحركة، مش بتقفز. السهم كمان بيلف.
الحركة دي غالبًا CSS transition، مش مكتبة أنيميشن. في تلات طرق منتشرة.
grid من صفر لواحد
دي الطريقة الأنضف دلوقتي. القائمة جوه صف في grid. الصف مقفول بـ 0fr، ومفتوح بـ 1fr. الانتقال على grid-template-rows.
مش محتاج تعرف ارتفاع العناصر. المتصفح بيحسب الصف وهو بيكبر. لو زدت عنصر أو شلته، الحركة لسه مظبوطة.
المحتوى جواه لازم يكون مقصوص. الفصل الجاي بيشرح ليه القص على الابن مش على الأب.
max-height
الطريقة القديمة: الارتفاع الأقصى صفر، ولما تفتح تحطه رقم كبير زي خمسميت بكسل، مع overflow: hidden و transition.
بسيطة، بس الرقم تخمين. لو المحتوى أقصر بكتير من التخمين، الحركة تحسها متأخرة لأن المدة بتتوزع على مسافة أطول من الحقيقة.
قياس بالـ JavaScript
مكتبات زي Framer Motion و Radix وواجهات زي shadcn/ui بتقيس scrollHeight، وتحرّك height من صفر للرقم ده، وبعد ما الحركة تخلص ترجّع الارتفاع auto.
أدقة حركة، وبتحتاج كود يقيس. طريقة الـ grid بتستغنى عن القياس.
السهم
لف السهم مش جزء من قص القائمة. نفس حالة الفتح بتضيف كلاس، والأيكونة تعمل transform: rotate(180deg) مع transition.
تلميع زيادة، لو حابب: منحنى cubic-bezier بدل ease، وتأخير بسيط لظهور العناصر، و prefers-reduced-motion عشان اللي طالب حركة أقل.