تطبيق عملي: الانتقالات

الآن وبعد أن قدمنا الخاصيتين transition و animation، فقد حان الوقت للتعمق أكثر في الانتقالات (transitions)، ومطالعة بعض الأمثلة.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

الانتقالات

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

الخاصية transition هي خاصية من خاصيات CSS. مثلها مثل الخاصيات height أو width أو border.

يمكننا برمجة الانتقالات في CSS على النحو التالي:

transition: background 0.5s linear;

في هذه الحالة، نقول للمتصفح أنّ أيّ انتقال لخاصية الخلفية (background) سيستغرق نصف ثانية، إضافة إلى استخدام دالة التوقيت "الخطي" (linear).

قد تتسبب الخاصية المذكورة أعلاه في تغيير خلفية الزر عند تمرير مؤشر الفأرة فوقه:

button {
  background: white;
  transition: background 0.5s linear;
}

button:hover {
  background: green;
}

لاحظ الخاصية transition في المحدد button، والتي تقول للمتصفح أن يطبّق الانتقال على أي تغيير في الحالة، مثل التغيير الذي يحدث عن التحويم (hover)، وكذلك عند العودة إلى الحالة الأصلية بعد التحويم.

إذا طبَّقنا الخاصية transition على حالة التحويم (hover) وحسب، فلن يتم الانتقال إلا إلى حالة التحويم، ولكن ليس عند العودة للحالة الأولى.

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

مثال: انتقال الزر

إليك مثالًا في CodePen يوضح تأثير التحويم (hover effect). في CodePen، يمكنك إجراء تغييرات على HTML و CSS ورؤية النتائج مباشرة.

الشيء المهم الذي ينبغي التركيز عليه هو الخاصيات التي تبدأ بالبادئة transition-‎.

transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease-out;

تخبر هذه الشيفرة المتصفح بنوع الحركة التي ينبغي إنشاؤها عند الانتقال من حالة عدم التحويم (non-hover state)، إلى حالة التحويم (hover state). كما تُخبر المتصفح بالتحريك (الانتقال) التدريجي لكل الخصائص (الألوان والحجم والموضع) على مدار 0.4 ثانية.

حاول تغيير بعض هذه القيم. على سبيل المثال، قم بتغيير "0.4s" إلى قيمة أطول، مثل "2s" (ثانيتين). كيف يبدو التحريك؟ يمكنك كذلك تغيير الخاصية من all إلى background.

لإنشاء تأثير ممتع، حاول تغيير قيمة transition-timing-function من ease-out إلى:

transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42)

دالة التوقيت cubic bezier تضفي على الحركة متعة وجاذبية. سنعود لدوال التوقيت بمزيد من التفاصيل في المقالات التالية.

البادئات وتوافق المتصفحات

لم أضمِّن بادئات المتصفحات (vendor prefixes) في شيفرات الأمثلة. وذلك لتسهيل قراءة الشيفرة، ولكن في حال كنت تستخدم الشيفرة في مرحلة الإنتاج فسيكون عليك إضافتها.

أحب استخدام بادئ تلقائي Autoprefixer (وهو خيار متاح في Codepen، لتفعيله اضغط على أيقونة الإعدادات "cog" في قسم CSS)، ويمكن تفعيلها باستخدام أدوات البناء، مثل Grunt أو Gulp. بالمقابل، يمكنك كتابتها يدويًا على النحو التالي:

-webkit-transition: ...;
-moz-transition: ...;
transition: ...;

تمرين

قم بتحرير الزر في المثال، وأضف أفكارك الخاصة. يمكنك تغيير الشكل (shape)، أو الحد (border)، أو أي خاصية أخرى. جرّب واستمتع، فالهدف هو التأكد من أنك تفهم كيف يؤثر الانتقال على تأثير التحويم الخاص بالعنصر.

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

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