تحسين تحريك صفوف الجدول باستخدام تأثير الانزلاق في CSS

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

أولاً وقبل كل شيء، حاولت استخدام خاصية transition في CSS، ولكنها لم تكن فعّالة بسبب تغيير خاصية display. لذا، اتجهت نحو استخدام animation، الأمر الذي عمل كما هو متوقع. ومع ذلك، كان هناك تحدي يتمثل في أن “الارتفاع الكامل للصف يتم الاحتفاظ به عند بدء التحريك”. يُظهر المثال أدناه هذه المشكلة: الصف الثالث يتم دفعه للأسفل مباشرةً قبل بدء التحريك.

السؤال هنا: “كيف يمكنني تحريك ارتفاع الصف تدريجيًا، بحيث يأخذ فقط المساحة اللازمة؟”

وكمكافأة، يجب أن:

1. لا يتطلب ارتفاعًا ثابتًا للصفوف.
2. يظهر كتحريك ترجمة بدلاً من تكبير، بحيث يبدو وكأنه “ينزلق من أسفل الصف الذي يسبقه”.
3. يكون “ثنائي الاتجاه” (يقوم بالعملية العكسية عند إخفائه).

لتحقيق ذلك، يمكنك الاعتماد على الكود التالي:

htmlCopy code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js">script>
<button type="button">Togglebutton>
<table>
  <tbody>
    <tr class="active">
      <td>Row 1td>
      <td>...td>
      <td>...td>
    tr>
    <tr>
      <td>Row 2td>
      <td>...td>
      <td>...td>
    tr>
    <tr class="active">
      <td>Row 3td>
      <td>...td>
      <td>...td>
    tr>
  tbody>
table>

cssCopy code
@keyframes anim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
tr {
  background: #eee;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  transform-origin: top;
  transition: transform 0.5s ease;
}
tr.active {
  transform: scaleY(1);
}
td {
  padding: 10px;
}

jsCopy code
$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});

في هذا الكود، تم استخدام transform مع خاصية scaleY لتحقيق التأثير المطلوب. تم تعديل خاصية overflow لتكون hidden لتجنب الاحتفاظ بالمساحة الكاملة عند بدء التحريك. وبهذا، يمكنك الاستمتاع بتحريك جميل وسلس لصفوف الجدول دون الحاجة إلى تحديد ارتفاع ثابت، ويظهر وكأنه انزلاق من أسفل الصف السابق.

لتحقيق تأثير الانزلاق بشكل أكثر دقة، يمكن تعديل الكود السابق قليلاً لاستخدام تأثير التراجع (translateY) بدلاً من تغيير حجم العنصر. هذا يمكن أن يُضيف لمسة إضافية من الانسيابية للتحريك.

تم تحديث الكود على النحو التالي:

cssCopy code
@keyframes anim {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
tr {
  background: #eee;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  transform-origin: top;
  transition: transform 0.5s ease;
}
tr.active {
  transform: translateY(0);
}
td {
  padding: 10px;
}

تم تعديل @keyframes لاستخدام translateY بدلاً من scaleY، وتم تحديث تأثير tr.active أيضًا بناءً على ذلك. هذا يجعل الحركة تظهر كما لو كانت الصف ينزلق من أسفل الصف الذي يسبقه.

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

يمكن أيضًا تكامل هذا النهج مع المتغيرات التي يمكن تخصيصها، مثل سرعة الحركة (ease في الوقت الحالي) وألوان الخلفية والحدود حسب تفضيلات التصميم الخاصة بك. هذا يسمح لك بتضمين الأناقة والتخصيص الشخصي في تحريك الصفوف بشكل أكبر.