بودكاست CSS - 044: عمليات النقل
عند التفاعل مع موقع إلكتروني، قد تلاحظ أنّ العديد من العناصر تحتوي على state. على سبيل المثال، يمكن أن تكون القوائم المنسدلة في حالة مفتوحة أو مغلقة. يمكن أن يتغيّر لون الأزرار عند التركيز عليها أو تمرير مؤشر الماوس فوقها. تظهر النماذج المشروطة وتختفي.
بشكل تلقائي، تعمل CSS على تبديل نمط هذه الحالات على الفور.
باستخدام انتقالات CSS، يمكننا التدخّل بين الحالة الأولية والحالة المستهدفة للعنصر. يعزز الانتقال بين الاثنين تجربة المستخدم من خلال توفير التوجيه المرئي والدعم والتلميحات حول سبب التفاعل وتأثيره.
خصائص النقل
لاستخدام الانتقالات في CSS، يمكنك استخدام خصائص الانتقال المختلفة أو خاصية الاختصار transition
.
خاصية الانتقال
تحدد السمة transition-property
الأنماط المطلوب نقلها.
.my-element {
transition-property: background-color;
}
تقبل السمة transition-property
اسم سمة واحدة أو أكثر لسمات CSS في قائمة مفصولة بفواصل.
يمكنك اختياريًا استخدام transition-property: all
للإشارة إلى ضرورة نقل كلّ موقع.
مدة الانتقال
تُستخدَم السمة transition-duration
لتحديد المدة الزمنية التي ستستغرقها عملية النقل حتى تكتمل.
تقبل الدالة transition-duration
الوحدات الزمنية إما بالثواني (s
) أو بالملي ثانية (ms
) ويتم ضبطها تلقائيًا على 0s
.
دالة الوقت الانتقالي
استخدِم السمة transition-timing-function
لتغيير سرعة عملية نقل CSS على مدار transition-duration
.
بشكل تلقائي، ستنقل لغة CSS العناصر بسرعة ثابتة (transition-timing-function: linear
). قد تصبح الانتقالات الخطية اصطناعية إلى حد ما، على الرغم من ذلك، في الحياة الواقعية، تكون الكائنات لها وزن ولا يمكن أن تتوقف وتبدأ على الفور. يمكن أن يؤدي التخفيف من مرحلة الانتقال أو الخروج منه إلى جعل الانتقالات أكثر حيوية وطبيعية.
تقدم الوحدة حول CSS Animation نظرة عامة جيدة على دوال التوقيت.
يمكنك استخدام DevTools لتجربة دوال توقيت مختلفة في الوقت الفعلي.
تأخير-النقل
استخدِم السمة transition-delay
لتحديد وقت بدء عملية النقل. إذا لم يتم تحديد transition-duration
، ستبدأ عمليات النقل فورًا لأن القيمة التلقائية هي 0s
. وتقبل هذه السمة وحدة زمنية، مثل الثواني (s
) أو المللي ثانية (ms
).
هذه السمة مفيدة لعمليات الانتقال المتدرّجة، ويتم تحقيقها من خلال ضبط سمة transition-delay
أطول لكل عنصر لاحق في المجموعة.
تُعد transition-delay
مفيدة أيضًا لتصحيح الأخطاء. يمكن أن يؤدي ضبط قيمة التأخير على قيمة سالبة إلى بدء انتقال أبعد إلى المخطط الزمني.
اختصار: انتقال
على غرار معظم خصائص CSS، تتوفّر نسخة مختصرة. تجمع transition
بين transition-property
وtransition-duration
وtransition-timing-function
وtransition-delay
.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
ما الذي يمكن وما لا يمكن نقله؟
عند كتابة CSS، يمكنك تحديد الخصائص التي يجب أن تحتوي على انتقالات متحركة. اطّلع على قائمة MDN هذه لخصائص CSS المتحركة.
بشكل عام، من الممكن فقط نقل العناصر التي يمكن أن تكون "حالة متوسطة" بين حالتها الأولى والنهائية. على سبيل المثال، من غير الممكن إضافة عمليات انتقال في font-family
، لأنّه من غير الواضح كيف يجب أن تبدو "الحالة الوسطى" بين serif
وmonospace
. ومن ناحية أخرى، يمكن إضافة انتقالات في font-size
لأن وحدتها طول يمكن إضافة عناصره إليها.
في ما يلي بعض الخصائص الشائعة التي يمكنك نقلها.
تحويل
يتم نقل سمة CSS transform
بشكل شائع لأنها خاصية مسرَّعة عن وحدة معالجة الرسومات، وتؤدي إلى صور متحركة أكثر سلاسة تستهلك أيضًا طاقة بطارية أقل. تتيح لك هذه السمة تغيير حجم عنصر أو تدويره أو ترجمته أو إمالته عشوائيًا.
راجِع القسم الذي يتناول التحويلات في وحدة الدوال.
اللون
يمكن أن يكون اللون قبل التفاعل وأثناءه وبعده مؤشرًا رائعًا للحالة. على سبيل المثال، قد يتغير لون الزر إذا تم تمريره فوقه. يمكن أن يقدم تغيير اللون هذا ملاحظات للمستخدم بأن الزر قابل للنقر.
تُعد السمات color
وbackground-color
وborder-color
بضعة أماكن يمكن فيها نقل الألوان عند التفاعل.
يمكنك الاطّلاع على وحدة الألوان.
تظليل
غالبًا ما يتم نقل الظلال للإشارة إلى تغيير الارتفاع، مثل تركيز المستخدم.
يمكنك الاطّلاع على الوحدة حول الظلال.
الفلاتر
filter
هي خاصية CSS فعّالة تتيح لك إضافة تأثيرات رسومية بسرعة. قد يؤدي الانتقال بين ولايات filter
المختلفة إلى تحقيق نتائج مبهرة جدًا.
راجِع وحدة الفلاتر.
مشغّلات الانتقال
يجب أن تتضمّن خدمة CSS تغييرًا في الحالة وحدثًا يؤدّي إلى تفعيل هذه الحالة لكي يتم تفعيل عمليات نقل CSS. وخير مثال على هذا المشغِّل هو :hover
الفئة الزائفة. تتطابق هذه الفئة الزائفة عندما يمرِّر المستخدم مؤشر الماوس فوق عنصر ما.
في ما يلي قائمة ببعض الفئات الزائفة والأحداث التي يمكن أن تؤدي إلى تغييرات في الحالة في عناصرك.
:hover
: يتطابق مع ما إذا كان المؤشر فوق العنصر.:focus
: تتطابق مع ما إذا كان العنصر محل التركيز.:focus-within
: يتطابق مع ما إذا كان يتم التركيز على العنصر أو أي من العناصر التابعة له.:target
: تتم المطابقة عندما يتطابق الجزء من عنوان URL الحالي مع معرّف العنصر.:active
: يتطابق مع وقت تنشيط العنصر (عادةً عند الضغط على الماوس فوقه).- تغيير
class
من JavaScript: عندما تتغير لغة CSSclass
الخاصة بأحد العناصر من خلال JavaScript، ستنقل CSS الخصائص المؤهّلة التي تم تغييرها.
انتقالات مختلفة للدخول أو الخروج
من خلال ضبط خصائص transition
مختلفة على التمرير/التركيز، يمكن إنشاء بعض التأثيرات المثيرة للاهتمام.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
اعتبارات إمكانية الوصول
تجدر الإشارة إلى أنّ عمليات نقل CSS ليست للجميع. بالنسبة لبعض الأشخاص، يمكن أن تسبب الانتقالات والرسوم المتحركة دوار الحركة أو عدم الراحة. لحسن الحظ، تحتوي خدمة CSS على ميزة وسائط تسمى prefers-reduced-motion
ترصد ما إذا كان المستخدم قد أبدى تفضيله لحركة أقل من جهازه.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
لمزيد من المعلومات عن ميزة الوسائط هذه، يمكنك الاطّلاع على مشاركة المدونة prefers-reduced-Motion: أحيانًا تكون الحركة أقل.
اعتبارات الأداء
عند التعامل مع عمليات نقل CSS، قد تواجه مشاكل في الأداء في حال أضفت عمليات نقل لبعض مواقع CSS. على سبيل المثال، عندما تتغير سمات مثل width
أو height
، يتم نشر المحتوى في بقية الصفحة. يفرض هذا على CSS حساب مواضع جديدة لكل عنصر متأثر لكل إطار من الانتقال. إذا أمكن، ننصحك باستخدام سمات مثل transform
وopacity
بدلاً من ذلك.
يمكنك الاطّلاع على دليلنا حول الصور المتحركة العالية الأداء في CSS للحصول على معلومات مفصّلة عن هذا الموضوع.
التحقّق من استيعابك
اختبر معلوماتك حول الانتقالات
ما خاصية الانتقال المخصصة لتحديد التخفيف؟
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
من أفضل الممارسات استخدام السمة transition-property: all
.
all
إلى حدوث مشاكل في الأداء وعمليات نقل غير مقصودة.يمكن نقل جميع المواقع.
font-family
.