Vue Academy · درس

‏TransitionGroup لتحريك القوائم

تحريك قوائم v-for، وانتقالات الحركة، والرسوم المتحركة المتتابعة باستخدام delay

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

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

تحريك القوائم

يتعامل <Transition> مع عنصر واحد. أما القوائم المعروضة باستخدام v-for، فاستخدم <TransitionGroup>، الذي يحرّك العناصر عند إضافتها أو حذفها أو إعادة ترتيبها.

خاصية tag

بخلاف Transition، يستطيع TransitionGroup عرض عنصر تغليف حقيقي. مرّر tag="ul" (أو أي وسم آخر)، وسيُخرج ذلك العنصر حول عناصر القائمة.

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

يحتاج كل عنصر إلى key

وجود :key فريد لكل عنصر مطلوب. يستخدمه Vue لتتبع العناصر التي تحركت أو دخلت أو غادرت. لا تستخدم فهرس المصفوفة بوصفه key للقوائم المتحركة.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

فئات الدخول والمغادرة

يستخدم TransitionGroup فئات الدخول والمغادرة نفسها التي يستخدمها Transition. عرّف هذه الفئات لظهور العناصر وإزالتها كلٌّ على حدة.

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

فئة move الخاصة

الميزة الأبرز هي فئة -move (مثل list-move). عند إعادة ترتيب العناصر، يحرّك Vue كل عنصر بسلاسة إلى موضعه الجديد باستخدام انتقال يعتمد على transform.

.list-move {
  transition: transform 0.4s ease;
}

تقنية FLIP

تستند -move إلى FLIP: سجّل أولًا الموضع القديم، ثم اقرأ الموضع الجديد، واعكس الحركة باستخدام transform ليبدو العنصر ثابتًا، ثم شغّل الحركة بإزالة transform. ينفّذ Vue ذلك تلقائيًا.

/* Vue computes: translate(oldX - newX) then animates to 0 */

تحتاج العناصر المغادرة إلى تموضع مطلق

يستمر العنصر الذي تجري إزالته في شغل مساحة، وقد يؤدي ذلك إلى تعطيل حركة العناصر المجاورة. عيّن position: absolute على فئة leave-active لإخراج العناصر المغادرة من تدفق التخطيط.

.list-leave-active {
  position: absolute;
}

مثال على قائمة قابلة للفرز

ادمج فئات الدخول والمغادرة والحركة، وسيحرّك Vue الإدراج والإزالة وإعادة الترتيب جميعًا في الوقت نفسه.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

إنشاء تتابع باستخدام transitionDelay

لجعل العناصر تظهر واحدًا تلو الآخر، اربط transition-delay مضمّنًا بالاعتماد على فهرس العنصر. ينتظر كل عنصر مدة أطول قليلًا من العنصر السابق.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

إنشاء التتابع باستخدام خطافات JavaScript

لإنشاء تتابع يعتمد على البيانات، يمكنك أيضًا استخدام خطافات JavaScript وسمت data-index، مع تأخير كل onEnter بحسب فهرس العنصر.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

ملاحظات حول الأداء

تحرّك FLIP الخاصية transform، وهي ملائمة لمعالجة GPU. حافظ على حجم القوائم ضمن حدود معقولة، وفضّل transform وopacity على الخصائص التي تؤدي إلى إعادة حساب التخطيط، مثل width أو top، للحصول على حركة سلسة بمعدل 60 إطارًا في الثانية.

اختبار سريع

ما الذي تتيحه فئة list-move؟

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

مراجعة

تعلمت استخدام <TransitionGroup> للقوائم: عرض عنصر تغليف باستخدام tag، ومنح كل عنصر :key فريدًا، واستخدام فئات الدخول والمغادرة مع فئة -move لحركات إعادة الترتيب المعتمدة على FLIP، وتموضع العناصر المغادرة بشكل مطلق، وإنشاء تأثيرات تتابعية باستخدام transitionDelay المعتمد على الفهرس.

البدء مجانًا

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

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

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

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

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

هل درس «‏TransitionGroup لتحريك القوائم» مجاني؟

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

ماذا ستتعلم في «‏TransitionGroup لتحريك القوائم»؟

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

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

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

كم من الوقت يستغرق درس «‏TransitionGroup لتحريك القوائم»؟

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

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

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

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

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