اذهب إلى المحتوى

مدخل إلى الانتقالات: التنقل بين الحالات


محمد بغات

سنلقي في هذه الفقرة نظرة على خاصية الانتقال transition.

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

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

التحريك (Animation) في المتصفحات ليس جديدًا. فقد وفرت لنا بعض مكتبات JavaScript مثل Flash و Canvas وغيرها طرقًا للتحريك، ولكن صارت CSS، في الآونة الأخيرة، خيارًا إضافيًا.

الانتقالات

إحدى الطرق التي تتيحها CSS للتحكم في التحريك في المتصفح هي باستخدام الخاصية 'transition'. بلغة المتصفحات، فإنّ الانتقال (transition) يعني حركة من حالة إلى أخرى.

الانتقال: من A إلى B

عندما نطبق عملية الانتقال على عنصر ما، فإننا نخبر المتصفح بأننا نريده أن ينقل، أو يحسب تلقائيًا، التغيير بين الحالات.

الانتقال المتحرك من A إلى B

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

زر متحرك

خصائص الانتقال

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

مثال آخر على الانتقالات المركبة:

المزيد من الانتقالات

سنناقش قريبًا كيفية استخدام الانتقالات للقيام بمثل هذه التحريكات.

مختصر القول

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

تمرين

كيف تبدو بيئة العمل خاصتك؟ قم بإلقاء نظرة على الشيفرة، وابحث عن الخاصية 'transition' في شيفرة CSS. هل يمكنك تخمين ما تفعله؟

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

سنلقي في المقالة التالية نظرة عامة على الخاصية 'animation'، وكيف تختلف عن الخاصية 'transition'.

المصادر

  • ترجمة وبتصرف للفصل transitions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...