نشكرك على متابعة مؤتمر Google I/O. مشاهدة المحتوى عند الطلب

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

انتقالات

The CSS Podcast - 044: Transitions

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

وتبدِّل CSS تلقائيًا نمط هذه الحالات على الفور.

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

سمات الانتقال

Browser Support

Source

لاستخدام الانتقالات في CSS، يمكنك استخدام سمات الانتقال المختلفة أو السمة المختصرة transition.

transition-property

تحدّد السمة transition-property الأنماط التي سيتم نقلها.

.my-element {
  transition-property: background-color;
}

تقبل العلامة transition-property اسمًا واحدًا أو أكثر من أسماء خصائص CSS في قائمة مفصولة بفواصل.

يمكنك اختياريًا استخدام transition-property: all للإشارة إلى أنّه يجب نقل كلّ موقع.

transition-duration

تُستخدَم السمة transition-duration لتحديد المدة التي سيستغرقها انتقال لإكماله.

يقبل transition-duration وحدات الوقت، إما بالثواني (s) أو بالملي ثانية (ms)، ويكون الإعداد التلقائي هو 0s.

transition-timing-function

استخدِم السمة transition-timing-function لتغيير سرعة انتقال CSS على مدار transition-duration.

سينقل CSS العناصر تلقائيًا بسرعة ثابتة (transition-timing-function: linear). يمكن أن تبدو الانتقالات الخطية مصطنعة إلى حدٍ ما، لأنّ الأجسام في الحياة الواقعية لها وزن ولا يمكن إيقافها وتشغيلها على الفور. يمكن أن يؤدي الانتقال إلى الانتقال أو الخروج منه بسلاسة إلى جعل الانتقالات أكثر حيوية وطبيعية.

تقدّم الوحدة المتعلّقة بالصور المتحركة في CSS نظرة عامة جيدة على دوالّ التوقيت.

يمكنك استخدام DevTools لتجربة وظائف توقيت مختلفة في الوقت الفعلي.

محرِّر أوقات الانتقالات المرئية في "أدوات مطوري البرامج في Chrome"

transition-delay

استخدِم السمة 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 لأنّ وحدته هي طول يمكن إجراء عملية تقريب بينه.

مخطّط بياني للأشكال التي تنتقل بسلاسة من حالة إلى أخرى، وسطرَان من النص بخطوط مختلفة لا يمكن نقلهما بسلاسة

في ما يلي بعض الخصائص الشائعة التي يمكنك نقلها.

تحويل

Browser Support

Source

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

اطّلِع على القسم الخاص بالتحويلات في وحدة الدوالّ.

اللون

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

إنّ سمات color وbackground-color وborder-color هي مجرد أماكن قليلة يمكن فيها تغيير اللون عند التفاعل.

اطّلِع على الوحدة المتعلّقة بالألوان.

الظلال

غالبًا ما يتم نقل الظلال للإشارة إلى تغيير الارتفاع، مثل التركيز على المستخدم.

اطّلِع على الوحدة المتعلّقة بالظلال.

الفلاتر

‫filter هي سمة فعّالة في CSS تتيح لك إضافة تأثيرات رسومية على الفور. يمكن أن يؤدي الانتقال بين حالات filter المختلفة إلى تحقيق بعض النتائج المثيرة للإعجاب.

اطّلِع على الوحدة المتعلّقة بالفلاتر.

عوامل تشغيل الانتقال

يجب أن يتضمّن رمز CSS تغيير حالة وحدثًا يؤدي إلى تغيير الحالة هذا لتفعيل عمليات النقل في CSS. ومن الأمثلة الشائعة على هذا المشغّل :hover الفئة الزائفة. تتطابق هذه الفئة الزائفة عندما يمرّر المستخدم مؤشر الماوس فوق عنصر.

في ما يلي قائمة ببعض الفئات الزائفة والأحداث التي يمكن أن تؤدي إلى تغييرات في حالة عناصرك.

‫:hover: تتطابق إذا كان المؤشر فوق العنصر.
‫:focus: تتطابق إذا كان التركيز على العنصر.
‫:focus-within : يتطابق إذا كان العنصر أو أي من سلفه مركّزًا عليه.
:target: يتطابق عندما يتطابق الجزء من عنوان URL الحالي مع معرّف العنصر.
:active: تطابق عند تفعيل العنصر (عادةً عند الضغط على الماوس فوقه).
class التغيير من JavaScript: عندما يتغيّر class عنصر CSS من خلال 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: Sometimes less movement is more للحصول على مزيد من المعلومات عن ميزة الوسائط هذه.

اعتبارات الأداء

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

يمكنك الاطّلاع على دليلنا حول الرسومات المتحرّكة عالية الأداء في CSS للتعرّف على هذا الموضوع بشكل مفصّل.

التحقّق من فهمك

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

ما هي خاصية الانتقال المخصّصة لتحديد السهولة؟

transition-duration

يُرجى إعادة المحاولة.

transition-easing

ليست خاصية CSS حقيقية.

transition-cubic-bezier

ليست خاصية CSS حقيقية.

transition-timing-function

إجابة صحيحة.

animation-ease

ليست خاصية CSS حقيقية.

من أفضل الممارسات استخدام transition-property: all

صحيح

يُرجى إعادة المحاولة. يمكن أن يؤدي تحديد all إلى حدوث مشاكل في الأداء وعمليات انتقال غير مقصودة.

خطأ

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

يمكن نقل جميع المواقع.

صحيح

يُرجى إعادة المحاولة. لا يمكن نقل المواقع مثل font-family.

خطأ

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