تأثيرات حركية على عناصر قوائم HTML باستخدام CSS

يُساهم إضافة بعض التحريك (animation) عندما تتغيّر أجزاء صفحة الويب، في مُساعدة المُستخدِم على إدراك ما الّذي يحدث في الصّفحة، فيُمكن للتحريك أنّ يَدل على وصول مُحتوى جديد، أو لفت نظره إلى المُحتوى الّذي هو طور الإزالة.

ستتناول هذه المقالة كيف يُمكن للتحريك المُساعدة على تقديم مُحتوى جديد، وذلك عبر إظهار وإخفاء عناصر قائمة من القائمة الخاصّة بهم.

See the Pen WvjoXa by Walid (@01walid) on CodePen.

تقديم/تحضير المُحتوى (Introducing content)

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

إن أحد الأمثلة الأكثر شيوعًا على إضافة أو إزالة المُحتوى يكون في إدارة محتويات قائمة، مع أنّه يُمكن استخدام التحريك لبقيّة الأنواع الأخرى من المُحتوى بطبيعة الحال.

إعداد صفحة الويب (Setting up the HTML)

سيتمّ كخطوة أولى استخدام قائمة وزر لإضافة عناصر جديدة إلى القائمة.

<ul id="list">
  <li class="show">List item</li>
  <li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

يجب الانتباه إلى بعض الأمور هنا، أوّلًا يجب استخدام IDs في صفحة HTML، على الرغم من أنّها لا تُستخدم في التنسيق (styling) عادةً، بما أنّها تُستخدم في تحديد عنصر بحدّ ذاته – على عكس الأصناف (classes) – ولكنّها من الأفضل استخدامها هنا بسبب استخدام جافاسكريبت.

تملك العناصر الأوليّة الصنف “show”، حيثُ هو الصنف الّذي سيتمّ استخدامه فيما بعد في إضافة تأثير التحريك.

استخدام JavaScript مع عناصر القائمة

سيتمّ كتابة سطورًا من جافا سكريبت لاستكمال عرض المثال، وذلك لإضافة عنصر قائمة جديد إلى القائمة، ومن ثُمّ إضافة الصنف “show” ليتمكن التحريك من عمل عمله، يوجد في الحقيقة سببٌ في استخدام هذا الأسلوب، ففي حال إضافة عناصر القائمة في حالة الظهور مُباشرةً، عندها لن يكون هناك مُتسع من الوقت للتنقل (transition) ليعمل عمله.

يُمكن الالتفاف حول الأمر عبر استخدام التحريك على العناصر li، ولكن ستُصعب هذه الطريقة من عمليّة التعديل عند إزالة العناصر.

/*
 * Add items to a list - from cssanimation.rocks/list-items/
 */
document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

عناصر القائمة بدون تحريك (No animation)

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

li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

li.show {
  height: 2em;
  margin: 2px 0;
}

تمّ في التنسيق السابق ضبط عناصر li لتبدو على شكر مُستطيل، وبدون النقاط الدائريّة (bullet points)، وبارتفاع (height) بالقيمة 0، وهامش بمثله، وضبط overflow إلى مخفي (hidden)، كل هذا من أجل أنّ تكون عناصر القائمة غير مرئيّة إلى حين تطبيق الصنف show عليها.

يُعيّن الصنف show ارتفاعًا وهامشًا للعناصر، وباعتبار أنّه لم يتمّ تطبيق التحريك بعد، فيجب على هذه العناصر أنّ تظهر فجأةً (مُباشرةً وبدون أي تأثير) على الصّفحة.

إضافة تأثير التَّلاشِي (Fade)

سيتمّ إضافة تأثير تلاشي بسيط كأوّل مثال على التحريك، فستظهر عناصر القائمة شيئًا فشيئًا على خلاف الظهور السابق، ولكن يبقى المظهر ضعيفًا بصريًا، مع أنّه يُقدّم للمُستخدِم فترة من الزمن لمُلاحظة أنّ شيئًا ما يحدث.

See the Pen MwmbGM by Walid (@01walid) on CodePen.

تمّ إنشاء أقصوصة منفصلة من CSS لإضافة التأثير، ولتطبيقها على القائمة، سيتمّ تطبيق الصنف fade على الحاوية المُحيطة بالقائمة.

.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}

.fade li.show {
  opacity: 1;
}

إضافة تأثير التّلاشي والانزلاق (Slide down & Fade)

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

See the Pen vOmyre by Walid (@01walid) on CodePen.

يكمن الاختلاف بين هذا المثال وبين المثال ذو الصنف fade السابق فقط في أنّ الارتفاع height: 2em قد تمّت إزالته، وباعتبار أنّ الصنف show يملك ارتفاعًا مضبوطًا (مورثًا من أقصوصة CSS الأولى في هذا الدرس)، فإنه سيحوّل الارتفاع بشكل آلي.

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}

.slide-fade li.show {
  opacity: 1;
}

التأرجح (Swinging in)

يُمكن الذهاب أكثر من ذلك بجانب تأثيري التّلاشي والانزلاق، وذلك عبر إضافة لمسة ثلاثيّة الأبعاد، فيُمكن للمُتصفّح تحريك ونقل العناصر بالأبعاد الثلاثة، الأمر الّذي يُساهم في إضافة عمق بصري ومنظوري إلى المشهد والصورة.

See the Pen NqjbzE by Walid (@01walid) on CodePen.

يتمّ الإعداد عن طريق تعريف الحاوية section، والّتي بداخلها سيحدث التحرّك الثلاثي الأبعاد، ولعمل هذا المنظور يجب استخدام الخاصّيّة perspective.

إن المنظوريّة (perspective) في CSS هي عمق المشهد/المنظر، ويُعبّر الرقم المُنخفض عن منظور قليل العمق، ومن المُستحسن تجربة هذه الخاصّيّة لاستكشاف القيمة المُناسبة والبعد المطلوب بالشكل الأمثل.

.swing {
  perspective: 100px;
}

سيتمّ في الخطوة التّالية إعداد العناصر li للتحوّل (transform) في المكان، وسيتم استخدام الخاصّيّة opacity لإنشاء تأثير التلاشي كما تمّ من قبل، ولكن مع استخدام الخاصّيّة transform لتدوير عناصر li في مكانها.

.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

تمّ البدء في المثال السابق مع عناصر القائمة li ومع دوران مُساوي إلى تسعين درجة، ولكن عند إضافة الصنف show سيتمّ ضبط الخاصّيّة transform إلى القيمة none، الأمر الّذي يسمح لها بالتنقل في المكان، ولإعطاء تأثير التأرجح تمّ استخدام دالة التوقيت cubic-bezier.

التأرجح من الجانب (Swinging from side)

يمكن تحسين التأثير السابق بهدف إنشاء تنسيقات مُختلفة وبسهولة، في المثال التّالي تتأرج عناصر القائمة من الناحية الجانبيّة.

See the Pen eNWBjY by Walid (@01walid) on CodePen.

ليتم إنشاء هذا التأثير كل ما يجب فعله هو تغيير محور الدوران.

.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

ما تمّ عمله في الشيفرة السابقة هو فقط تغيير rotateX إلى rotateY.

سوابق الخاصيات واختبار المُتصفّحات (Prefixes and browser testing)

لا تتضمّن الشيفرة السابقة على أي من سوابق المتصفحّات (prefixes)، وذلك من أجل سهولة قراءة الشيفرة فقط، ولكن في الواقع العمليّ يُنصح في إضافة هذه السوابق لدعم المُتصفّحات الّتي تحتاج إلى السابقة webkit أو أيً من السوابق الأُخرى، أو يُمكن الاعتماد على Autoprefixer في ذلك.

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

ترجمة – وبتصرّف – للمقال Animating List Items.