أساسيات التحريك: trigger و state
عرّف حالات ومحفزات التحريك
أساسيات التحريك: trigger و state درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
حركات Angular
نظام الحركات في Angular هو DSL تصريحي مبني على Web Animations API. تصف الحالات والانتقالات، ويتولى Angular التوقيت وتحديثات DOM.
الإعداد
وفّر الحركات في إعدادات بدء التشغيل لتفعيل محرّك الحركات.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});trigger
تسمّي trigger حركةً وتجمع حالاتها وانتقالاتها. وتربطها بعنصر من خلال ربط.
animations: [
trigger('openClose', [
// states and transitions
])
]تعريف الحالات
تربط state حالةً مسماةً بمجموعة من أنماط CSS التي ينبغي أن يمتلكها العنصر أثناء وجوده في تلك الحالة.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))دالة style
تأخذ style كائنًا من خصائص CSS. استخدم مفاتيح camelCase أو أسماء CSS بين علامتي اقتباس.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })ربط trigger
في القالب، اربط @triggerName بتعبير يُرجع الحالة الحالية.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>trigger متكامل
إليك trigger يتضمن حالتين وانتقالًا بينهما.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])التحكم في الحالة من المكوّن
يبدّل المكوّن قيمة منطقية أو نصًا فقط؛ ويُجري Angular انتقالًا بين أنماط الحالة المطابقة.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }الحالة العامة
يطابق الحرف العام * أي حالة، وهو مفيد للقيم الافتراضية وحركات الدخول والخروج التي ستتناولها لاحقًا.
state('*', style({ opacity: 1 }))حالة void
تمثل الحالة الخاصة void عنصرًا غير موجود في DOM، وهي الأساس لحركات الدخول والخروج.
لماذا الحركات التصريحية؟
تبقي الحركات التصريحية منطق التوقيت خارج المكونات، وتتكامل مع دورة حياة Angular، وتنظف تلقائيًا عند مغادرة العناصر لـ DOM.
تحقق سريع
اختبر مدى فهمك لأساسيات الحركات.
مراجعة
تعلّمت أن حركات Angular تستخدم trigger يتضمن تعريفات state (يربط كل منها اسمًا بـ style)، ويُربط في القالب عبر [@trigger]. وتغطي حالتا void و* حالات الغياب وأي حالات.
الأسئلة الشائعة
هل درس «أساسيات التحريك: trigger و state» مجاني؟
نعم — نص درس «أساسيات التحريك: trigger و state» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «أساسيات التحريك: trigger و state»؟
عرّف حالات ومحفزات التحريك تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «أساسيات التحريك: trigger و state»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات التحريك: trigger و state
- الانتقالات والتوقيت
- تحريك الدخول والمغادرة
- الإطارات الرئيسية والتحريك المتدرّج