Vue Academy · درس

الانتقالات والتحريك بين Routes

استخدام RouterView مع Transition، وتحديد transition-name وفقًا للمسار، وإضافة تأثير الانزلاق أو التلاشي بين المسارات

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

تحريك الانتقال بين المسارات

عند تغيّر عنوان URL، يتبدل المكوّن المطابق فورًا. ومن خلال تغليف العرض في Transition الخاص بـVue، يمكنكم التلاشي أو الانزلاق بين الصفحات للحصول على تجربة أكثر سلاسة.

RouterView مع v-slot

للتحريك، تحتاجون إلى الوصول إلى المكوّن الذي جرى حله. ويعرض الشكل scoped slot من RouterView كلاً من Component وroute.

<RouterView v-slot="{ Component }">
  <component :is="Component" />
</RouterView>

التغليف باستخدام Transition

ضعوا Transition حول component الديناميكي. يطبّق Vue أصناف الدخول والمغادرة عند تركيب مكوّن المسار وإلغاء تركيبه.

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

لماذا mode out-in؟

من دون mode، تتحرك الصفحتان القديمة والجديدة في الوقت نفسه وتتداخلان. ينتظر mode="out-in" مغادرة الصفحة القديمة قبل دخول الصفحة الجديدة.

تعريف CSS

يصبح name بادئة لأصناف CSS. عرّفوا انتقالات الدخول والمغادرة لإنشاء تأثير تلاشي.

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

انتقال خاص بكل مسار عبر البيانات الوصفية

خزّنوا اسم الانتقال في meta الخاص بالمسار حتى تتحرك المسارات المختلفة بطرق مختلفة — انزلاق لقسم، وتلاشي لقسم آخر.

{ path: '/about', component: About, meta: { transition: 'slide' } }

حساب اسم الانتقال

اقرؤوا route.meta.transition من الفتحة واربطوه باسم Transition، مع الرجوع إلى قيمة افتراضية.

<RouterView v-slot="{ Component, route }">
  <Transition :name="route.meta.transition || 'fade'" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

الانزلاقات الاتجاهية

يمكنكم اختيار الانتقال ديناميكيًا استنادًا إلى اتجاه التنقل — مثل الانزلاق إلى اليسار عند التقدم وإلى اليمين عند الرجوع — وذلك بمقارنة عمق المسار داخل حارس.

دخول الانزلاق ومغادرته

يجمع الانزلاق بين الشفافية والتحويل. حرّكوا الصفحة الداخلة من اليمين، والصفحة المغادرة إلى اليسار.

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>

استخدام المفتاح عند تغيّر المعاملات

إذا اشترك مساران في المكوّن نفسه، مثل /user/1 و/user/2، يعيد Vue استخدامه ويتجاوز الانتقال. أضيفوا :key إلى مسار المسار لفرض إعادة التصيير والتحريك.

<component :is="Component" :key="route.path" />

مراعاة تقليل الحركة

لإتاحة الوصول، عطّلوا التحريكات عندما يفضّل المستخدم تقليل الحركة، وذلك باستخدام استعلام وسائط CSS.

<style>
@media (prefers-reduced-motion: reduce) {
  .fade-enter-active, .fade-leave-active { transition: none; }
}
</style>

اختبار سريع

اختبروا معرفتكم بانتقالات المسارات.

خلاصة

لقد تعلمتم تحريك المسارات:

استخدموا RouterView مع v-slot للحصول على Component وroute.
غلّفوا component :is باستخدام Transition، واستخدموا mode="out-in".
عرّفوا CSS للدخول والمغادرة بالاعتماد على اسم الانتقال.
اقرؤوا route.meta.transition للتحريكات الخاصة بكل مسار، وأضيفوا :key للمكونات المشتركة.

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

هل درس «الانتقالات والتحريك بين Routes» مجاني؟

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

ماذا ستتعلم في «الانتقالات والتحريك بين Routes»؟

استخدام RouterView مع Transition، وتحديد transition-name وفقًا للمسار، وإضافة تأثير الانزلاق أو التلاشي بين المسارات تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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