Angular Academy · درس

تحريك الدخول والمغادرة

حرّك العناصر عند دخولها ومغادرتها

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

تحريك الظهور والاختفاء

غالبًا ما تريد تحريك العناصر عند ظهورها أو اختفائها، مثلما يحدث عند إضافة عنصر إلى قائمة أو إزالته منها. يوفّر Angular الاسمَين المستعارين :enter و:leave لهذا الغرض.

‏void والظهور والاختفاء

يوجد العنصر غير الموجود في DOM في حالة void. ويعني الدخول void => *، بينما يعني الخروج * => void.

الاسم المستعار :enter

يمثل :enter اختصارًا لـ void => *. استخدمه لتحريك العناصر عند إضافتها.

transition(':enter', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

الاسم المستعار :leave

يمثل :leave اختصارًا لـ * => void. يُبقي Angular العنصر في DOM حتى انتهاء حركة الخروج.

transition(':leave', [
  animate('300ms', style({ opacity: 0 }))
])

التشغيل باستخدام تدفق التحكم

طبّق trigger على العناصر التي تديرها @if أو @for. تؤدي إضافتها أو إزالتها إلى تشغيل الدخول أو الخروج.

@if (visible()) {
  <div [@fade]>Hello</div>
}

‏trigger للتلاشي

إليك trigger قابلًا لإعادة الاستخدام للتلاشي عند الظهور والاختفاء.

trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('200ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms', style({ opacity: 0 }))
  ])
])

مثال على الانزلاق إلى الداخل

اجمع بين transform والشفافية لإنشاء تأثير انزلاق عند الدخول.

transition(':enter', [
  style({ transform: 'translateY(-10px)', opacity: 0 }),
  animate('250ms ease-out',
    style({ transform: 'translateY(0)', opacity: 1 }))
])

حركات عناصر القائمة

ضع trigger على كل عنصر داخل @for؛ إذ تؤدي إضافة العناصر أو إزالتها إلى تحريك كل عنصر بشكل مستقل.

@for (item of items(); track item.id) {
  <li [@fade]>{{ item.name }}</li>
}

لماذا يحتاج الخروج إلى المحرّك

عادةً يختفي العنصر المُزال فورًا. يعترض محرّك الحركات عملية الإزالة، ويُبقي العقدة، ويشغّل حركة :leave، ثم يزيلها، وكل ذلك تلقائيًا.

تعطيل الحركات

اربط @.disabled لتخطي الحركات بشكل مشروط، وهو مفيد لتفضيلات تقليل الحركة أو العرض الأولي.

<div [@.disabled]="prefersReducedMotion">...</div>

أفضل الممارسات

اجعل حركتي الدخول والخروج قصيرتين وهادئتين. احترم prefers-reduced-motion. حرّك transform والشفافية (وهما ملائمان لوحدة معالجة الرسومات) بدلًا من خصائص التخطيط لتحقيق سلاسة أفضل.

اختبار سريع

اختبروا مدى فهمكم لرسوم الدخول والخروج المتحركة.

مراجعة

تعلّمتم أن :enter (void => *) و:leave (* => void) يحرّكان العناصر عند إضافتها وإزالتها، ويعملان مع @if/@for. ويُبقي المحرّك العقد المغادرة حتى يكتمل تحريكها.

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

هل درس «تحريك الدخول والمغادرة» مجاني؟

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

ماذا ستتعلم في «تحريك الدخول والمغادرة»؟

حرّك العناصر عند دخولها ومغادرتها تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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