Vue Academy · درس

خطافات انتقال JavaScript

خطافات @before-enter و@enter و@after-enter و@leave، واستخدام GSAP للرسوم المتحركة المعقدة

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

لماذا نستخدم خطافات JavaScript

تغطي فئات CSS معظم الحالات، لكن بعض الحركات تحتاج إلى JavaScript، مثل دمج مكتبات كـ GSAP، أو تحريك canvas، أو حساب قيم ديناميكية. يوفّر <Transition> خطافات دورة الحياة لهذا الغرض تحديدًا.

الخطافات المتاحة

يُصدر Vue أحداثًا لكل مرحلة: @before-enter و@enter و@after-enter و@enter-cancelled، بالإضافة إلى خطافات المغادرة المناظرة لها.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

يحدد before-enter الحالة الأولية

يستقبل @before-enter عنصر DOM ويُنفَّذ قبل إدراجه. استخدمه لتحديد الأنماط الابتدائية، تمامًا كما تفعل فئة enter-from.

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

يستقبل enter المعاملين el وdone

يتلقى @enter معاملين: العنصر ودالة الاستدعاء done. حرّك العنصر، ثم استدعِ done() عند الانتهاء لكي يعرف Vue أن الانتقال انتهى.

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

استدعِ done دائمًا

إذا نسيت done()، فسوف ينتظر Vue إلى الأبد ولن يكتمل الانتقال؛ ولن يُنفَّذ after-enter، وقد يبقى العنصر في حالة حركة غير مكتملة. استدعاؤها إلزامي في الخطافات التي تتحكم بها JavaScript.

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

leave مع done

تعمل خطافة @leave بالطريقة نفسها: حرّك العنصر إلى الخارج، ثم استدعِ done() لكي يزيله Vue من DOM.

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

استخدم after-enter للتنظيف

تُنفَّذ @after-enter بعد اكتمال الدخول. استخدمها لإزالة الأنماط المضمّنة، أو إعادة ضبط خصائص الانتقال، أو تشغيل منطق لاحق.

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

تجاوز CSS باستخدام :css="false"

عندما تنفّذ الحركة باستخدام JavaScript فقط، عيّن :css="false". يخبر ذلك Vue بتجاوز اكتشاف فئات CSS بالكامل، والاعتماد فقط على دوال الاستدعاء done لتحديد التوقيت. كما يمنع تداخل CSS غير المقصود.

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

دمج GSAP

تتألق خطافات JavaScript عند استخدامها مع مكتبات الحركة. يستطيع GSAP تحريك العنصر تدريجيًا واستخدام done بوصفها دالة الاستدعاء onComplete.

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

الخطافات الملغاة

تُنفَّذ @enter-cancelled و@leave-cancelled عند مقاطعة انتقال، مثل أن يبدّل المستخدم بسرعة. استخدمهما لإيقاف الحركات الجارية وتجنب بقاء حالة غير مرغوبة.

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

متى تختار خطافات JavaScript

استخدم خطافات JavaScript عندما تحتاج إلى محاكاة الفيزياء، أو قيم ديناميكية تختلف لكل عنصر، أو دمج مكتبة، أو ترتيب دقيق للخطوات. أما التلاشي والانزلاق البسيطان، فتبقى فئات CSS أبسط وأكثر أداءً.

اختبار سريع

لماذا نمرّر :css="false" مع خطافات JavaScript؟

مراجعة

تعلمت خطافات انتقال JavaScript: @before-enter (لتحديد الحالة الأولية)، و@enter/@leave (لتحريك العنصر ثم استدعاء done)، و@after-enter (للتنظيف)، بالإضافة إلى :css="false" لتجاوز فئات CSS، والخطافات الملغاة للتعامل مع المقاطعات.

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

هل درس «خطافات انتقال JavaScript» مجاني؟

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

ماذا ستتعلم في «خطافات انتقال JavaScript»؟

خطافات @before-enter و@enter و@after-enter و@leave، واستخدام GSAP للرسوم المتحركة المعقدة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «خطافات انتقال JavaScript»؟

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

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

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

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

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