تاريخ النشر: 27 مارس 2026
يقدّم الإصدار 147 من Chrome انتقالات العرض على مستوى العنصر، وهي ميزة تتيح لك بدء انتقال العرض على شجرة فرعية من نموذج المستند (DOM) من خلال استدعاء Element.startViewTransition().
تتيح هذه الميزة تشغيل انتقالات متعددة للعرض في الوقت نفسه، وتتيح لك تضمين انتقالات العرض الجارية، وتعمل على حلّ مشاكل الطبقات في محتوى position: fixed، كل ذلك مع إبقاء بقية الصفحة تفاعلية.
ما الذي تغيَّر؟
منذ أن أعلنّا عن إتاحة الميزة للمطوّرين لاختبارها في الإصدار 140 من Chrome، تعاونّا مع المنتدى وفريق عمل CSS لوضع اللمسات الأخيرة على التفاصيل، لا سيما ما يتعلّق بالسلوكيات التلقائية:
- تشارك جذور النطاق ذاتيًا تلقائيًا.
- تحتوي عمليات الانتقال بين طرق العرض المُفصَّلة تلقائيًا على العناصر الزائفة المضمّنة من خلال استخدام مجموعات عمليات الانتقال بين طرق العرض المضمّنة.
- يتم تلقائيًا قص محتوى العنصر الزائف
::view-transition-group-children()في انتقال عرض مُفصَّل إذا كان العنصر الجذر للنطاق يقص المحتوى الزائد. - تطبِّق عمليات انتقال العرض على مستوى العنصر تلقائيًا السمتَين
contain: layoutوview-transition-scope: allعلى العنصر الجذر للنطاق أثناء عملية الانتقال.
بعد هذه التحديثات، ستتوفّر انتقالات العرض على مستوى العنصر في إصدار Chrome الثابت بدءًا من الإصدار 147.
العروض التوضيحية
إعادة ترتيب القوائم
يتيح لك هذا العرض التوضيحي ترتيب العناصر في كل قائمة بشكل عشوائي. يمكنك أيضًا تبديل مواضع القوائم من خلال النقر على الزر في الوسط.
عرض توضيحي مباشر
تسجيل العرض التوضيحي
بما أنّه يتم استخدام انتقالات العرض التي تغطي عناصر معيّنة، يمكن أن يتم تشغيل انتقالات العرض العشوائية في كلتا القائمتين في الوقت نفسه. يمكنك أيضًا بدء عملية انتقال العرض الخارجي، ما يؤدي إلى تبديل مواضع القوائم، بينما لا يزال يتم إعادة ترتيب عناصر القائمة.
رحلتي إلى باتاغونيا
يوضّح العرض التوضيحي"رحلتي إلى باتاغونيا" انتقالات العرض المحدودة النطاق بالعناصر. تم إنشاء هذا العرض التوضيحي استنادًا إلى فيديو الحملة "تجربة مستخدم جديدة على الويب".
استخدِم القوائم المنسدلة لفلترة عناصر الشبكة. استخدِم الزر إضافة في كل عنصر من عناصر الشبكة لإضافتها إلى قائمة العناصر المحدّدة التي تظهر في الشريط الجانبي.
عرض توضيحي مباشر
للاطّلاع على العرض التوضيحي الكامل، افتح "رحلتي إلى باتاغونيا" في علامة تبويب منفصلة.
تسجيل العرض التوضيحي
يستخدم العرض التوضيحي انتقالات العرض على مستوى العنصر في ثلاثة مواضع:
- شبكة العناصر عند فلترتها
- عناصر الشبكة عند إضافتها إلى قائمة العناصر المحدّدة
- الشريط الجانبي الذي يعرض قائمة العناصر المحدّدة
قراءة الدليل
لمعرفة كل شيء عن عمليات انتقال العرض على مستوى العناصر، اقرأ الدليل. توضّح لك هذه المقالة كيفية تنفيذ عمليات انتقال العرض على مستوى العناصر، وتشرح تفاصيل إضافية، وتتضمّن المزيد من العروض التوضيحية.