Vue Academy · درس

مكوّن Transition

فئات v-enter-from وv-enter-active وv-enter-to وv-leave-*، والخاصية name للفئات المخصصة

الدرس 1 من 413 خطوة

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

ما الذي يفعله مكوّن Transition

تأتي Vue مع مكوّن مدمج هو <Transition>، يطبّق رسومًا متحركة عند الدخول والمغادرة على عنصر أو مكوّن واحد عند إدراجه أو إزالته باستخدام v-if أو v-show.

ولا يعرض المكوّن نفسه أي عنصر DOM إضافي — بل يدير فقط فئات CSS والتوقيت على العنصر الابن.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

عنصر واحد فقط

يتوقع <Transition> عنصرًا ابنًا مباشرًا واحدًا بالضبط. لن ينجح تغليف عدة عناصر شقيقة — استخدموا <TransitionGroup> للقوائم بدلًا من ذلك.

يجب تبديل العنصر الابن باستخدام v-if أو v-show أو مكوّن ديناميكي.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

فئات الانتقال الست

أثناء الدخول أو المغادرة، تضيف Vue تلقائيًا ست فئات وتزيلها بالتسلسل.

v-enter-from / v-leave-from — حالة البداية
v-enter-active / v-leave-active — المرحلة النشطة (ضعوا الانتقال هنا)
v-enter-to / v-leave-to — حالة النهاية

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

تسمية الانتقال

مرّروا الخاصية name إلى الانتقال لتغيير بادئة الفئة من v- إلى الاسم الذي تختارونه. عند استخدام name="fade" تصبح الفئات fade-enter-from وfade-enter-active وغيرهما.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

مثال كامل لتلاشي العنصر

يحرّك تأثير التلاشي التقليدي الخاصية opacity. يبدأ العنصر شفافًا تمامًا، وتعلن الفئة النشطة الانتقال، ثم تنقله فئة النهاية إلى مستوى تعتيم كامل.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

تسلسل الدخول خطوة بخطوة

عند إدراج العنصر:

تُضاف fade-enter-from وfade-enter-active قبل الرسم (بعتامة تساوي 0).
في الإطار التالي، تُزال fade-enter-from وتُضاف fade-enter-to، فتتحرك العتامة تدريجيًا نحو 1.
عند انتهاء الانتقال، تُزال فئتا active وto.

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

تسلسل المغادرة

تشبه المغادرة الدخول، مع استخدام فئات leave. وغالبًا ما تعيدون استخدام القاعدة النشطة نفسها في الاتجاهين.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

مقارنة بين v-if وv-show

يؤدي كلاهما إلى تشغيل الانتقالات. يعمل v-if على تركيب العنصر وإلغاء تركيبه فعليًا، بينما يُبقي v-show العنصر في DOM ويبدّل الخاصية display. وبالنسبة إلى v-show، تدير Vue تبديل العرض حول المرحلة النشطة حتى يظل التحريك مرئيًا.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

التشغيل عند العرض الأولي

لا يعمل الانتقال افتراضيًا عند العرض الأول. أضيفوا الخاصية appear لتشغيل حركة الدخول عند تركيب المكوّن للمرة الأولى.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

الانتقال بين عنصرين

استخدموا v-if / v-else داخل Transition واحد للتبديل بين عنصرين. امنحوا كل عنصر key فريدًا إذا كانا من الوسم نفسه، حتى تتعامل Vue معهما كعنصرين مختلفين.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

الحركة المخفّضة وإمكانية الوصول

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

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

اختبار سريع

ما الذي تحدده fade-enter-from؟

أجب عليها في الدرس التفاعلي

مراجعة

تعلّمتم استخدام المكوّن المدمج <Transition>: فهو يغلّف عنصرًا واحدًا يتم تبديله باستخدام v-if/v-show، ويطبّق ست فئات CSS (enter-from وenter-active وenter-to وما يقابلها للمغادرة)، ويدعم بادئة name، وappear للعرض الأول، وmode لعمليات التبديل.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «مكوّن Transition» مجاني؟

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

ماذا ستتعلم في «مكوّن Transition»؟

فئات v-enter-from وv-enter-active وv-enter-to وv-leave-*، والخاصية name للفئات المخصصة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «مكوّن Transition»؟

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

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

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

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

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