مرحبا يا هبر!
أريد مشاركة طريقة أخرى لإنشاء انتقال css لخاصية
height من
0px إلى
auto .
واجه هذه المشكلة عند تطوير مكونات الويب TreeView و DataGrid. في TreeView ، قررت إنشاء توسيع / انهيار سلس للعقد ، وفي DataGrid - صفوف تحتوي على محتوى إضافي. بعد قراءة الإنترنت ، وجدت عدة طرق للتنفيذ ، أهمها من خلال
max-height و javascript. تم استبعاد تنفيذ جافا سكريبت - هناك css مع دعم للتحولات والرسوم المتحركة. بقي
max-height ، وخاصة في الأمثلة مع القوائم المنسدلة كل شيء يعمل.
في TreeView ، تحتوي كل عقدة على تداخل غير محدود ، لذا لا يمكنك تحديد الحد الأقصى لارتفاع محتوياته على الفور ، وحتى إذا قمت بتعيين
max-height إلى كبير جدًا ، فستحدث مشكلات في الرسوم المتحركة الانتقالية. أيضًا ، إذا قمت بتوسيع العقد التابعة ، سيزداد ارتفاع الوالد وقد يتداخل مع
max-height . شئنا أم
max-height ،
max-height مناسب. DataGrid لديه نفس المشكلة - يمكن أن يكون هناك أي محتوى إضافي على التوالي. تحتاج
height:auto !
لذلك ، لنبدأ في تنفيذ الانتقال على خاصية
height من
0px إلى
auto . النظر في مثال بسيط.
السماح:
elBlock: HTMLDivElement - كتلة ليتم elBlock: HTMLDivElement / طيها ؛elToggle: HTMLButtonElement - زر تبديل الحالة.
حدد فئة css للكتلة التي قمنا فيها بضبط تشذيب المحتوى والانتقال نفسه:
.block { overflow: hidden; transition: height 500ms ease; }
نحن نصف
onClick الأحداث
onClick لـ
elToggle :
elToggle.addEventListener("click", () => { if (elBlock.style.height === "0px") { elBlock.style.height = `${ elBlock.scrollHeight }px` } else { elBlock.style.height = `${ elBlock.scrollHeight }px`; window.getComputedStyle(elBlock, null).getPropertyValue("height"); elBlock.style.height = "0"; } });
يبقى لإضافة
height:auto الإرجاع
height:auto بعد الانتقال:
elBlock.addEventListener("transitionend", () => { if (elBlock.style.height !== "0px") { elBlock.style.height = "auto" } });
حسنًا ، هذا كل شيء ، الآن يعمل توسيع / انهيار الكتلة كما ينبغي ولا يعتمد على حجم المحتوى.
الشكل 1 - مثال على توسيع / طي العقد في TreeViewتجدر الإشارة إلى عيوب هذا النهج:
- باستخدام جافا سكريبت ، أود فقط المغلق.
- أثناء الانتقال ، قد يتغير المحتوى (ارتفاعه ،
scrollHeight ) وبعد اكتماله ، في حالة إرجاع auto ، سيتغير ارتفاع الكتلة بشكل كبير في اتجاه أو آخر. لتجنب هذا التأثير ، تحتاج إلى تتبع التغيير في scrollHeight وتغيير height . كما هو موضح في الممارسة العملية ، عادة ما يستغرق الانتقال / التمدد 0.5 ثانية لكل منهما ، وخلال هذا الوقت من غير المحتمل أن يكون لدى المستخدم وقت لتغيير شيء ما في الداخل ، على سبيل المثال ، في حالة TreeView ، قم بتوسيع العقدة الفرعية.
شكرا لاهتمامكم!