<Transition> انتقالات الدخول والخروج
آخر تحديث: 2026-10-22
<Transition> انتقالات الدخول والخروج
يغلّف
| المجموعة | المدمجات |
|---|---|
| النوع | مكوّن / عنصر |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<Transition name="fade">
<p v-if="show">content</p>
</Transition>
/* classes: fade-enter-active / fade-enter-from / fade-enter-to (same for leave) */
.fade-enter-active { transition: opacity .3s }
.fade-enter-from { opacity: 0 }⚙️ الوسائط
| props | name (بادئة الأصناف)، وappear، وmode (مثل out-in)، وduration، وcss:false للاعتماد على خطّافات JS |
|---|
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Toggling fades the paragraph out and back in over ~0.3s.💡 نقاط مهمة
💡 نصيحة تُستخدم name كبادئة لأصناف الانتقال؛ والبادئة الافتراضية هي v-.
⚠️ تحذير يُسمح بعنصر فرعي واحد فقط — استخدم TransitionGroup للقوائم.
ℹ️ ملاحظة الوضع mode="out-in" ينتظر انتهاء انتقال الخروج قبل بدء الدخول.
🏷️ المدمجات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا لا تظهر أي حركة؟
ج غالبًا بسبب غياب CSS أو عدم تطابق بادئة الصنف.
س هل يمكن الجمع بين CSS والخطّافات؟
ج نعم، لكن css:false يترك التحكم للخطّافات وحدها.
س ماذا عن حركات القوائم؟
ج استخدم <TransitionGroup>، الذي يضيف الصنف .move.
