Frontend Academy · درس

الانتقالات: الخاصية والمدة والتوقيت

أضف transition لتحريك تغييرات خصائص CSS بسلاسة، واختر مددًا مناسبة، وحدّد دوال تسهيل مثل ease-in-out.

الانتقالات: الخاصية والمدة والتوقيت درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هو انتقال CSS؟

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

البنية الأساسية

transition: property duration timing-function delay. يمكنك إدراج انتقالات متعددة تفصل بينها فواصل.

.btn {
  background: #6366f1;
  transition: background-color 0.2s ease;
}
.btn:hover {
  background: #4f46e5;
}
// Browser smoothly animates the colour change

قيمة الخاصية

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

.card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.15s linear;
}

/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }

المدة — كم يستغرق الانتقال

حدّد مدة الانتقال بوحدة s (الثواني) أو ms (المللي ثانية). استخدم مددًا قصيرة (100–200ms) للتفاعلات الدقيقة، ومتوسطة (200–400ms) لتغييرات حالة المكونات، وأطول (400ms+) لتحريكات مستوى الصفحة.

دوال التوقيت — الإحساس بالحركة

تتحكم دوال التوقيت في منحنى التسارع. ومن القيم الشائعة: ease (الافتراضية: بداية بطيئة، ووسط سريع، ونهاية بطيئة)، وlinear (سرعة ثابتة)، وease-in (تبدأ ببطء)، وease-out (تنتهي ببطء)، وease-in-out. والمنحنيات المخصصة هي: cubic-bezier(x1, y1, x2, y2).

.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

التأخير — متى يبدأ

يؤخر تأخير الانتقال بدء الحركة لمدة محددة. استخدموه لترتيب بدء حركة عدة عناصر بفواصل زمنية، أو لمنع تشغيل hover عن طريق الخطأ عند تحريك الفأرة بسرعة.

.dropdown-menu {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
}

حدث transitionend

يمكن لـ JavaScript الاستماع إلى انتهاء الانتقال باستخدام حدث transitionend. ويفيد ذلك في إزالة العناصر بعد تلاشيها أو تشغيل الخطوة التالية في تسلسل.

element.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'opacity' && element.style.opacity === '0') {
    element.remove();
  }
});

تحويل العناصر

تستفيد الخاصية transform من تسريع GPU، ولذلك فهي مثالية للانتقالات. وتشمل التحويلات الشائعة: translate() وscale() وrotate() وskew(). لا يؤدي تحريك transform وopacity إلا إلى عملية التركيب — وهو المسار الأسرع.

.card {
  transform: translateY(0) scale(1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

ما الخصائص التي يمكن إجراء انتقالات عليها؟

يمكن إجراء انتقال على أي خاصية ذات قيمة رقمية، مثل opacity وcolour وtransform وwidth وheight وpadding وborder وfont-size. أما خصائص مثل display وvisibility فلا تنتقل بسلاسة — لذا استخدموا opacity بدلًا منها للظهور والاختفاء التدريجيين.

تطبيقي: ظهور نافذة modal تدريجيًا

نافذة modal تظهر تدريجيًا وتكبر من حجم أصغر قليلًا. طبّقوا الفئة .open باستخدام JavaScript، واتركوا لـ CSS التعامل مع الحركة.

.modal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.modal.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

الأداء: التزموا بـ transform وopacity

يُعد تحريك الخصائص التي تؤدي إلى إعادة التخطيط، مثل width وheight وmargin وtop وleft، مكلفًا — إذ يعيد المتصفح حساب التخطيط في كل إطار. التزموا بـ transform وopacity للحصول على رسوم متحركة سلسة بمعدل 60fps.

تحقق سريع

ما خاصية CSS التي ينبغي تفضيل تحريكها للحصول على أفضل أداء؟

مراجعة: انتقالات CSS

‏transition: property duration timing delay. حرّكوا خصائص محددة بدلًا من 'all'. استخدموا ease وease-out وease-in-out للحصول على حركة طبيعية. استمعوا إلى transitionend لربط الإجراءات بالتتابع. التزموا بـ transform وopacity لتحسين الأداء. استخدموا تبديل الفئات في JS لتشغيل الانتقالات.

الأسئلة الشائعة

هل درس «الانتقالات: الخاصية والمدة والتوقيت» مجاني؟

نعم — نص درس «الانتقالات: الخاصية والمدة والتوقيت» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «الانتقالات: الخاصية والمدة والتوقيت»؟

أضف transition لتحريك تغييرات خصائص CSS بسلاسة، واختر مددًا مناسبة، وحدّد دوال تسهيل مثل ease-in-out. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الانتقالات: الخاصية والمدة والتوقيت»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy