<TransitionGroup> انتقالات القوائم
آخر تحديث: 2026-10-22
<TransitionGroup> انتقالات القوائم
يحرّك
| المجموعة | المدمجات |
|---|---|
| النوع | مكوّن / عنصر |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>
.list-move { transition: transform .4s }⚙️ الوسائط
| props | tag (عنصر تغليف، بلا قيمة افتراضيًا)، وname، وmove-class، وappear |
|---|
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
New items appear one by one while existing rows slide aside.💡 نقاط مهمة
⚠️ تحذير يحتاج كل عنصر فرعي إلى key فريد — تعتمد FLIP عليه.
ℹ️ ملاحظة تستخدم انتقالات المواضع الصنف .move وتتطلب انتقال CSS أو حركة (animation).
💡 نصيحة القيمة tag="ul" تعرض عنصر تغليف حقيقي؛ واحذفها إن لم ترغب في عنصر تغليف.
🏷️ المدمجات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بينه وبين Transition؟
ج يتولى Transition العناصر المفردة، بينما يتولى TransitionGroup القوائم.
س لا تظهر حركة الانتقال بين المواضع؟
ج تحقق من قاعدة انتقال الصنف .move ومن فريدية key.
س هل يمكن أن تعمل حركتا الدخول والانتقال معًا؟
ج نعم — تعملان بالتوازي، ويمكن ضبطهما عبر move-class.
