نقل الارتفاع من 0 إلى تلقائي باستخدام CSS

إنشاء انتقالات سلسة للارتفاع باستخدام CSS

يمكن أن يكون نقل ارتفاع العنصر من 0 إلى تلقائي باستخدام CSS أمرًا صعبًا بسبب عدم وجود نقطة نهاية محددة للقيمة التلقائية. يؤدي هذا غالبًا إلى ظهور العناصر فجأة دون تأثير انتقال سلس.

في هذه المقالة، سوف نستكشف كيفية تحقيق تأثير انزلاقي سلس للأسفل

العنصر باستخدام انتقالات CSS. سنقوم بدراسة المشكلات الشائعة وتقديم الحلول لإنشاء انتقال سلس دون الاعتماد على JavaScript.

يأمر	وصف
overflow: hidden;	يخفي أي محتوى يفيض خارج صندوق العنصر. يستخدم لإدارة رؤية المحتوى أثناء انتقالات الارتفاع.
transition: height 1s ease;	يطبق تأثير انتقال سلس على خاصية الارتفاع لمدة تزيد عن ثانية واحدة باستخدام وظيفة التوقيت السهل.
scrollHeight	إرجاع الارتفاع الكامل للعنصر، بما في ذلك المحتوى الفائض غير المرئي. يستخدم في JavaScript لحساب الارتفاعات الديناميكية.
addEventListener('mouseenter')	يتم إرفاق معالج حدث بالحدث "mouseenter"، والذي يتم تشغيله عندما يدخل مؤشر الماوس إلى العنصر. تستخدم لبدء انتقال الارتفاع.
addEventListener('mouseleave')	يُرفق معالج حدث بالحدث "mouseleave"، والذي يتم تشغيله عندما يترك مؤشر الماوس العنصر. يستخدم لعكس انتقال الارتفاع.
style.height	يضبط ارتفاع العنصر مباشرة في JavaScript. يستخدم لضبط الارتفاع ديناميكيًا لتحقيق انتقالات سلسة.
:root	فئة CSS الزائفة التي تطابق العنصر الجذر للمستند. يستخدم لتحديد متغيرات CSS العالمية.
var(--max-height)	يشير إلى متغير CSS. يستخدم لتعيين الحد الأقصى للارتفاع ديناميكيًا أثناء التحولات.

فهم التحولات السلسة للارتفاع في CSS

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

يتضمن البرنامج النصي الثاني JavaScript لضبط ارتفاع العنصر ديناميكيًا. عند تمرير مؤشر الماوس فوق العنصر الأصلي، يقوم البرنامج النصي بحساب الارتفاع الكامل للمحتوى باستخدام ويعين هذه القيمة إلى خاصية العنصر الطفل. وهذا يضمن الانتقال السلس من الارتفاع 0 إلى ارتفاع المحتوى الكامل دون معرفة الارتفاع النهائي مسبقًا. ال و addEventListener('mouseleave') يتم استخدام الوظائف للتعامل مع أحداث تمرير الماوس، مما يضمن انتقال الارتفاع مرة أخرى إلى 0 عندما يترك الماوس العنصر الأصلي.

التقنيات المتقدمة لانتقالات ارتفاع CSS

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

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

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

استكشاف الرسوم المتحركة CSS للانتقالات السلسة

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

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

1. كيف يمكنني نقل الارتفاع من 0 إلى تلقائي باستخدام CSS؟
2. لتحقيق ذلك، يمكنك استخدام مزيج من الارتفاع الثابت و لتعيين قيمة الارتفاع ديناميكيًا. حلول CSS النقية محدودة بسبب ليست قابلة للتحريك مباشرة.
3. ما الفرق بين التحولات والرسوم المتحركة في CSS؟
4. توفر انتقالات CSS طريقة لتغيير قيم الخاصية بسلاسة (خلال مدة محددة) من حالة إلى أخرى، عادةً عند تغيير الحالة مثل التمرير. تسمح الرسوم المتحركة لـ CSS بتسلسلات أكثر تعقيدًا باستخدام الإطارات الرئيسية لتحديد الحالات والتوقيت.
5. هل يمكنني استخدام انتقالات CSS للعناصر ذات الارتفاع الديناميكي؟
6. نعم، ولكنك تحتاج عادةً إلى حساب الارتفاع مقدمًا أو استخدام JavaScript لتعيين قيمة الارتفاع ديناميكيًا للانتقال السلس.
7. ما هو الغرض من الملكية في التحولات CSS؟
8. ال تُستخدم الخاصية لإخفاء أي محتوى يتجاوز حدود العنصر، وهو أمر ضروري للانتقالات النظيفة التي تتضمن تغيرات في الارتفاع.
9. كيف العمل في الرسوم المتحركة CSS؟
10. تسمح لك الرسوم المتحركة في CSS بتحديد حالات العنصر في نقاط مختلفة أثناء الرسوم المتحركة. يمكنك تحديد الخصائص وقيمها في كل إطار رئيسي، وإنشاء رسوم متحركة معقدة.
11. هل يمكنني الجمع بين انتقالات CSS والرسوم المتحركة؟
12. نعم، يمكن أن يوفر الجمع بين انتقالات CSS والرسوم المتحركة تجربة أكثر ثراءً للمستخدم من خلال التعامل مع تغييرات الحالة والرسوم المتحركة المستمرة.
13. ما هو في جافا سكريبت؟
14. تقوم بإرجاع الارتفاع الإجمالي للعنصر، بما في ذلك المحتوى غير المرئي على الشاشة بسبب التجاوز. إنه مفيد لحساب الارتفاعات الديناميكية للانتقالات السلسة.
15. كيف عمل؟
16. ال تحدد الخاصية متى يجب أن تبدأ الرسوم المتحركة. يسمح لك بتسلسل رسوم متحركة متعددة للحصول على تأثير متعدد الطبقات.
17. لماذا المستخدمة في CSS؟
18. ال تستهدف الفئة الزائفة العنصر الجذر للمستند. يتم استخدامه بشكل شائع لتحديد متغيرات CSS العامة التي يمكن إعادة استخدامها خلال ورقة الأنماط.

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