الانتقالات والتوقيت
حرّك العناصر بين الحالات باستخدام الانتقالات
الانتقالات والتوقيت درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
التحريك بين الحالات
تصف الحالات الموضع الذي يستقر فيه العنصر؛ بينما تصف الانتقالات كيفية انتقاله بينها. تربط دالة transition تغيّر الحالة بحركة.
دالة transition
تأخذ transition تعبيرًا لتغيّر الحالة وخطوة حركة واحدة أو أكثر.
transition('closed => open', animate('300ms'))عوامل الاتجاه
استخدم => لاتجاه واحد، و<=> للاتجاهين.
transition('open <=> closed', animate('250ms ease-in-out'))دالة animate
تحدد animate التوقيت: المدة والتأخير الاختياري ووظيفة التسارع. وتكون صيغة السلسلة "duration delay easing".
animate('500ms 100ms ease-out')وحدات المدة
تقبل المدد ms أو s. ويُعامل الرقم المجرد على أنه بالميلي ثانية.
animate('0.4s')
animate('400ms')
animate(400)دوال التسارع
يتحكم التسارع في التعجيل: linear أو ease أو ease-in أو ease-out أو ease-in-out أو cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')أنماط الهدف المضمنة
يمكن أن تتلقى animate وسيط style ثانيًا للتحريك نحو أنماط غير مرتبطة بحالة مسماة.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])خطوات متعددة
مرّر مصفوفة من الخطوات لتنفيذ تسلسل ضمن انتقال واحد.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])الانتقالات العامة
استخدم * لمطابقة الانتقالات من أي حالة أو إليها، وهو مفيد لتأثيرات الدخول العامة.
transition('* => open', animate('200ms'))الأنماط الابتدائية
تحدد style() المجردة قبل animate() نقطة البداية، ثم يحرّك Angular العنصر إلى أنماط حالة الوجهة.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])أفضل ممارسات التوقيت
اجعل انتقالات واجهة المستخدم قصيرة (150-300ms) للحفاظ على الاستجابة. واحتفظ بالمدد الأطول للحركة الكبيرة والمقصودة. وائم وظيفة التسارع مع الإحساس الذي تريده.
تحقق سريع
اختبر مدى فهمك للانتقالات والتوقيت.
مراجعة
تعلّمت أن transition يربط تغيّرات الحالة (باستخدام => أو <=>) بخطوات animate. وسلسلة التوقيت هي duration delay easing، ويمكنك ربط خطوات style/animate لتنفيذ تسلسلات.
الأسئلة الشائعة
هل درس «الانتقالات والتوقيت» مجاني؟
نعم — نص درس «الانتقالات والتوقيت» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «الانتقالات والتوقيت»؟
حرّك العناصر بين الحالات باستخدام الانتقالات تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الانتقالات والتوقيت»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات التحريك: trigger و state
- الانتقالات والتوقيت
- تحريك الدخول والمغادرة
- الإطارات الرئيسية والتحريك المتدرّج