تاريخ النشر: 10 سبتمبر 2025
عمليات انتقال العرض المحدودة النطاق هي إضافة مقترَحة إلى View Transition API تتيح لك بدء عملية انتقال عرض على شجرة فرعية من نموذج المستند (DOM). أصبحت الميزة جاهزة للاختبار بدءًا من الإصدار 140 من Chrome مع تفعيل العلامة "ميزات تجريبية في النظام الأساسي للويب" في chrome://flags. نحن نسعى جاهدين للحصول على ملاحظات المطوّرين.
مقدمة سريعة
لبدء انتقال عرض محدود النطاق، استدعِ الدالة element.startViewTransition() (بدلاً من document.startViewTransition()) على أي HTMLElement تم تطبيق contain: layout عليه.
document.querySelector('nav').startViewTransition({
callback: () => {
// … code that manipulates the contents of <nav>
},
})
والنتيجة هي انتقال عرض محدد النطاق ضمن الشجرة الفرعية لعنصر HTMLElement الذي اخترته، مع إدراج شجرة ::view-transition الزائفة الناتجة في عنصر HTMLElement هذا. يعمل HTMLElement كحاوية لحركات الانتقال.
html
├─ head
└─ body
├─ nav
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(thing)
│ │ └─ ::view-transition-image-pair(thing)
│ │ ├─ ::view-transition-old(thing)
│ │ └─ ::view-transition-new(thing)
│ └─ ul
│ ├─ li
│ ├─ li
│ └─ li
└─ main
└─ …
تسمح عمليات الانتقال المحدودة النطاق بتشغيل عمليات انتقال متعددة للعناصر المرئية في الوقت نفسه (طالما أنّ لها جذور انتقال مختلفة). يتم منع أحداث المؤشر في الشجرة الفرعية فقط (يمكنك إعادة تفعيلها)، وليس في المستند بأكمله. بالإضافة إلى ذلك، تسمح هذه الخيارات برسم العناصر خارج جذر الانتقال للعرض فوق انتقال العرض النطاقي.
يمكنك الاطّلاع على كل المعلومات حول عمليات الانتقال بين طرق العرض المحدودة النطاق في شرح عمليات الانتقال بين طرق العرض المحدودة النطاق.
عرض توضيحي
في العرض التوضيحي التالي، يمكنك نقل نقطة داخل الحاوية الخاصة بها من خلال النقر على أحد الأزرار. ويمكن إجراء ذلك باستخدام انتقالات العرض على مستوى المستند أو على مستوى العنصر، ما يتيح لك معرفة كيفية اختلاف سلوكها.
عرض توضيحي مباشر
تسجيل العرض التوضيحي
باستخدام انتقالات العرض المحدودة النطاق، تظل النقطة مقصوصة من خلال العنصر الرئيسي أثناء الانتقال. بالإضافة إلى ذلك، لا يتم طلاء النقطة فوق النافذة المنبثقة عند عرضها.
نريد معرفة رأيك
نحن مهتمون بمعرفة ملاحظات منتدى مطوّري الويب حول ما يلي:
- شكل واجهة برمجة التطبيقات Scoped View Transitions API
- حالات الاستخدام التي تعمل فيها الميزة بشكل جيد أو لم تعمل على النحو المتوقّع
- كيفية حلّ الأسئلة حول نطاقات المشاركة الذاتية
يمكنك مشاركة ملاحظاتك من خلال التعليق على المشكلة رقم 9890 في مجموعة عمل CSS. يُرجى الاطّلاع على المشاكل المعروفة والقيود قبل إرسال ملاحظاتك.
إذا واجهت خطأً، يُرجى إرسال تقرير عن خلل Chromium لإعلامنا بذلك.