تعد انتقالات CSS طريقة رائعة لإنشاء التفاعل. هذا يكفي, transition إلى الحالة الأولية للعنصر، ويقوم المتصفح بتنشيط الانتقال بين الحالتين. التحولات لأحجام العناصر الجوهرية مثل auto ومع ذلك، فقد كانت هذه مشكلة لمطوري الويب لعقود من الزمن، وكان الخيار الوحيد هو حساب الارتفاع ديناميكيًا باستخدام JavaScript.
التحدي الآخر هو بدء التحولات عندما يحصل العنصر على نمطه الأول - مثل عند إضافته إلى DOM أو عند display-قيمة none التغييرات. تشرح هذه المقالة كيفية حل هذه المشكلة باستخدام ميزات CSS الجديدة مثل calc-size(), interpolate-size, @starting-style و transition-behavior يمكن إدارتها.
الحل مع calc-size()
إذا كان لدى المرء عنصر DOM يأتي من حالة مغلقة (height: 0) إلى حالة مفتوحة (height: auto) ، لا يتم تنفيذ الرسوم المتحركة عادةً، على الرغم من أن transitionتم تعيين الملكية. وذلك لأن المتصفحات لا تدعم التحولات إلى الأحجام الجوهرية مثل auto يدعم. الجديد calc-size()ومع ذلك، تتيح الدالة إجراء حسابات على هذه الكميات الجوهرية وبالتالي التحولات أيضًا:
f95f6dcb193aa903adc84ce47bc4a296
ال calc-size()-الوظيفة غير متاحة بعد في جميع المتصفحات. يمكن تحقيق البديل من خلال الاحتفاظ بالأصل height: auto-يمكن تحقيق الإعلان.
الحل مع interpolate-size
ال interpolate-sizeتتيح لك الخاصية ضبط سلوك الاستيفاء للمتصفحات وتحديد ما إذا كنت تريد التمييز بين الكلمات الرئيسية مثل auto يجب أن يقحم. افتراضيًا، يحدث الاستيفاء فقط بين القيم الرقمية. مع allow-keywords ومع ذلك، يمكنك تمكين الانتقالات بين الكلمات الرئيسية:
f95f6dcb193aa903adc84ce47bc4a296
بواسطتك interpolate-size: allow-keywords على :rootالعنصر، تقوم بتنشيط السلوك الجديد للصفحة بأكملها.
الانتقال من display:none
تنشأ مشكلة أخرى عندما يكون هناك عنصر من display:none التحولات إلى حالة مرئية. هناك display ليست خاصية متحركة، ولا تحدث أي رسوم متحركة. تساعد وظائف CSS الجديدة هنا @starting-style و transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
مع transition-behavior: allow-discrete يضمن تشغيل الرسوم المتحركة قبل display-قيمة block على none تم تبديله. تسمح هذه القواعد بتنفيذ التحولات حتى أثناء التحديث الأولي للنمط. ال @starting-styleتضمن القاعدة تشغيل الرسوم المتحركة بشكل صحيح عند تحديث النمط الأولي.
دعم المتصفح
حاليا الخصائص الجديدة calc-size() و interpolate-size غير مدعوم بعد من قبل جميع المتصفحات. وهي متاحة في Chrome خلف علامة التجربة، ولكن ليس بعد في Safari وFirefox. وبالمثل، دعم ل transition-behavior موجود في Chrome وEdge، ولكن ليس في Safari وFirefox. نأمل أن يتغير ذلك في المستقبل.