انتقالات

بودكاست 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: عندما تتغير لغة CSS class الخاصة بأحد العناصر من خلال 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 للحصول على معلومات مفصّلة عن هذا الموضوع.

التحقّق من استيعابك

اختبر معلوماتك حول الانتقالات