الميزات الجديدة في عمليات انتقال العرض (تحديث 2025)

Bramus

تاريخ النشر: 8 أكتوبر 2025

لقد تغيّر الكثير منذ أن أطلقنا عمليات الانتقال بين طرق العرض في المستند نفسه في عام 2023.

في عام 2024، أطلقنا عمليات انتقال العرض بين المستندات، وأضفنا تحسينات مثل view-transition-class وأنواع عمليات انتقال العرض، كما رحّبنا بمتصفّح Safari الذي أتاح استخدام عمليات انتقال العرض.

تقدّم لك هذه المشاركة نظرة عامة على التغييرات التي تم إجراؤها على عمليات الانتقال بين طرق العرض في عام 2025.

توافُق أفضل مع المتصفّحات وأُطر العمل

ستصبح انتقالات العرض في المستند نفسه متاحة قريبًا في Baseline Newly available

من مجالات التركيز في Interop 2025 واجهة برمجة التطبيقات View Transition API، وتحديدًا عمليات انتقال العرض في المستند نفسه باستخدام document.startViewTransition(updateCallback) وview-transition-class والتسمية التلقائية باستخدام view-transition-name: match-element وأداة اختيار CSS‏ :active-view-transition.

يعتزم Firefox تضمين هذه الميزات في الإصدار 144 القادم من Firefox الذي سيصبح إصدارًا ثابتًا في 14 أكتوبر 2025. سيؤدي ذلك إلى إتاحة هذه الميزات في Baseline Newly.

أصبحت واجهة برمجة التطبيقات View Transition API متاحة الآن في حزمة React الأساسية

على مدار العام، عمل فريق React على إضافة ميزة "انتقالات العرض" إلى أساسيات React. أعلنوا react@experimental عن توفير الدعم في أبريل، وخلال مؤتمر React Conf هذا الأسبوع، نقلوا الدعم إلى react@canary، ما يعني أنّ التصميم يقترب من شكله النهائي.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

يمكنك الاطّلاع على مستندات <ViewTransition>React للحصول على جميع التفاصيل أو مشاهدة هذا الفيديو من تقديم Aurora Scharff للحصول على مقدمة جيدة حول الموضوع.

الميزات التي تم إطلاقها مؤخرًا

تسمية العناصر تلقائيًا باستخدام view-transition-name: match-element

لتحديد عنصر سيتم أخذ لقطة شاشة له كجزء من عملية انتقال العرض، عليك إضافة view-transition-name إليه. وهذا أمر أساسي للانتقالات بين طرق العرض، لأنّه يتيح ميزات مثل الانتقال بين عنصرَين مختلفَين. يحتوي كل عنصر على القيمة نفسها view-transition-name في كل جانب من جوانب الانتقال، وتتولّى عمليات الانتقال للعرض الاهتمام بكل شيء.

ومع ذلك، يمكن أن تصبح تسمية العناصر بشكل فريد أمرًا مرهقًا عند نقل الكثير من العناصر التي لا تتغير فعليًا. إذا كان لديك 100 عنصر يتحرّك في قائمة، عليك ابتكار 100 اسم فريد.

بفضل match-element، لن تحتاج إلى تنفيذ كل ذلك. عند استخدام هذه السمة كقيمة لـ view-transition-name، سينشئ المتصفّح view-transition-name داخليًا لكل عنصر مطابق استنادًا إلى هوية العنصر.

في العرض التوضيحي التالي، يتم استخدام هذا الأسلوب. تحصل كل بطاقة في الصف على view-transition-name يتم إنشاؤه تلقائيًا.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

تحصل البطاقة التي يتم إدخالها أو إخراجها على اسم واضح. يُستخدَم هذا الاسم في CSS لربط صور متحركة معيّنة بتلك اللقطة. يتم تصميم اللقطات لجميع البطاقات الأخرى باستخدام view-transition-class المرتبط بها.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

تعرض "أدوات مطوّري البرامج" الآن قواعد تستهدف العناصر الزائفة التي تستخدم view-transition-class

لتصحيح أخطاء انتقالات العرض، يمكنك استخدام لوحة "الصور المتحركة" من "أدوات مطوّري البرامج" لإيقاف جميع الصور المتحركة مؤقتًا. يمنحك ذلك وقتًا لفحص العناصر الزائفة بدون القلق من وصول انتقال العرض إلى حالته النهائية. يمكنك حتى التنقّل يدويًا بين المخططات الزمنية للرسوم المتحركة لمعرفة كيفية عرض عمليات الانتقال.

في السابق، عند فحص أحد العناصر الزائفة ::view-transition-*، لم تكن "أدوات مطوّري البرامج في Chrome" تعرض القواعد المستهدفة للعناصر الزائفة باستخدام المجموعة view-transition-class. تغيّر ذلك في الإصدار 139 من Chrome الذي أضاف هذه الوظيفة.

تتوفّر مجموعات انتقالات العرض المتداخلة من الإصدار 140 من Chrome

عند تنفيذ انتقال العرض، يتم عرض العناصر التي تم التقاط لقطة لها في شجرة من العناصر الزائفة. يكون التصميم التلقائي للشجرة "مسطّحًا". وهذا يعني أنّه يتم فقدان التسلسل الهرمي الأصلي في DOM، وتصبح جميع مجموعات انتقالات العرض التي تم التقاطها عناصر شقيقة ضمن عنصر زائف واحد ::view-transition.

يكون أسلوب الشجرة المسطّحة هذا كافيًا للعديد من حالات الاستخدام، ولكنّه يصبح إشكاليًا عند استخدام تأثيرات مرئية مثل القص أو عمليات التحويل الثلاثية الأبعاد. تتطلّب هذه العناصر بعض التسلسل الهرمي في الشجرة.

بفضل "مجموعات انتقالات العرض المتداخلة"، يمكنك الآن تضمين عناصر ::view-transition-group الزائفة داخل بعضها البعض. عندما تكون مجموعات انتقالات العرض متداخلة، يمكن استعادة تأثيرات مثل القص أثناء الانتقال.

كيفية استخدام مجموعات انتقالات العرض

تكتسب العناصر الزائفة الآن المزيد من خصائص الحركة

عند ضبط إحدى سمات animation-* الطويلة على عنصر زائف ::view-transition-group(…)، سترث العناصر ::view-transition-image-pair(…) و::view-transition-old(…) و::view-transition-new(…) المضمّنة هذه السمة أيضًا. هذه الميزة مفيدة لأنّها تحافظ تلقائيًا على مزامنة التلاشي التدريجي بين ::view-transition-new(…) و::view-transition-old(…) مع ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

في البداية، كان هذا التوريث يقتصر على animation-duration وanimation-fill-mode (وanimation-delay لاحقًا أيضًا)، ولكن تم الآن توسيع نطاقه ليشمل المزيد من الخصائص المختصرة للرسوم المتحركة.

من المفترض أن تتضمّن المتصفّحات التي تتوافق مع عمليات الانتقال بين طرق العرض ما يلي في ورقة أنماط وكيل المستخدم:

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

تم طرح العناصر الزائفة التي ترث المزيد من الخصائص في الإصدار 140 من Chrome.

لم يعُد تنفيذ معاودة الاتصال الخاصة بوعد finished ينتظر إطارًا

عند استخدام وعد finished لتنفيذ دالة ردّ الاتصال، كان Chrome ينتظر إنشاء إطار قبل تنفيذ هذه الطريقة. قد يؤدي ذلك إلى حدوث وميض في نهاية الحركة عندما ينقل النص البرمجي بعض الأنماط في محاولة للحفاظ على حالة مشابهة من الناحية المرئية.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

يؤدي هذا التغيير في التوقيت إلى تصحيح الموقف من خلال نقل خطوات تنظيف عملية انتقال العرض لتنفيذها بشكل غير متزامن بعد اكتمال دورة الحياة. يضمن ذلك أنّ إطار العرض المرئي الذي تم إنشاؤه عند حلّ الوعد finished لا يزال يحتفظ ببنية انتقال العرض، وبالتالي تجنُّب الوميض.

تم طرح هذا التغيير في التوقيت في الإصدار 140 من Chrome.

الميزات القادمة

لم ينتهِ العام بعد، لذا لا يزال لدينا بعض الوقت لإطلاق المزيد من الميزات.

أصبحت ميزة "انتقالات العرض المحدود النطاق" متاحة للاختبار في الإصدار 140 من Chrome

انتقالات العرض النطاقي هي إضافة مقترَحة إلى View Transition API تتيح لك بدء انتقال عرض على شجرة فرعية من نموذج العناصر في المستند من خلال استدعاء element.startViewTransition() (بدلاً من document.startViewTransition()) على أي HTMLElement.

تسمح عمليات الانتقال المحدودة النطاق بتشغيل عمليات انتقال متعددة للعناصر المرئية في الوقت نفسه (طالما أنّ لها جذور انتقال مختلفة). يتم منع أحداث المؤشر في الشجرة الفرعية فقط (ويمكنك إعادة تفعيلها)، وليس في المستند بأكمله. بالإضافة إلى ذلك، تسمح هذه الخيارات برسم العناصر خارج جذر الانتقال على أعلى انتقال عرض النطاق المحدود.

في العرض التوضيحي التالي، يمكنك نقل نقطة داخل الحاوية الخاصة بها من خلال النقر على أحد الأزرار. ويمكن إجراء ذلك باستخدام انتقالات العرض على مستوى المستند أو على مستوى العنصر، ما يتيح لك معرفة كيفية اختلاف سلوكها.

أصبحت الميزة جاهزة للاختبار بدءًا من الإصدار 140 من Chrome مع تفعيل العلامة "ميزات تجريبية في النظام الأساسي للويب" في chrome://flags. نحن نسعى جاهدين للحصول على ملاحظات المطوّرين.

سيتغير موضع ::view-transition من fixed إلى absolute في الإصدار 142 من Chrome

يتم حاليًا تحديد موضع الاسم المستعار ::view-transition باستخدام position: fixed. بعد قرار مجموعة عمل CSS، سيتم تغيير ذلك إلى position: absolute.

إنّ تغيير قيمة position من fixed إلى absolute، والذي سيتم طرحه في الإصدار 142 من Chrome، لا يمكن ملاحظته بصريًا لأنّ الحاوية الرئيسية لعنصر ::view-transition الزائف هي الحاوية الرئيسية للّقطة على أي حال. التأثير الوحيد الذي يمكن ملاحظته هو قيمة position مختلفة عند إجراء getComputedStyle.

ستتوفّر ميزة "document.activeViewTransition" في الإصدار 142 من Chrome

عند بدء انتقال العرض، يتم إنشاء مثيل ViewTransition. يحتوي هذا العنصر على العديد من الوعود والوظائف لتتبُّع تقدّم عملية الانتقال، بالإضافة إلى السماح بإجراء تعديلات مثل تخطّي عملية الانتقال أو تعديل أنواعها.

بدلاً من مطالبتك بتتبُّع هذا المثال يدويًا، يوفّر Chrome الآن السمة document.activeViewTransition التي تمثّل هذا العنصر. إذا لم يكن هناك انتقال قيد التنفيذ، تكون القيمة null.

بالنسبة إلى انتقالات العرض في المستند نفسه، يتم ضبط القيمة عند استدعاء document.startViewTransition. بالنسبة إلى انتقالات العرض بين المستندات، يمكنك الوصول إلى مثيل ViewTransition في الحدثَين pageswap وpagereveal.

سيتم طرح ميزة document.activeViewTransition في الإصدار 142 من Chrome.

منع اكتمال انتقال العرض تلقائيًا باستخدام ViewTransition.waitUntil

تصل عملية انتقال العرض تلقائيًا إلى الحالة finished عند انتهاء جميع الرسوم المتحركة. لمنع إكمال التنزيل تلقائيًا، يمكنك قريبًا استخدام ViewTranistion.waitUntil. عند تمرير وعد، لن تصل ViewTransition إلى حالة finished إلا عند حلّ هذا الوعد الذي تم تمريره أيضًا.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

سيتوفّر هذا التغيير في وقت لاحق من هذا العام وسيسمح لك، على سبيل المثال، بانتظار fetch أو إتاحة تنفيذ انتقال عرض مستند إلى التمرير بسهولة أكبر.

الخطوات التالية

كما تلاحظون، لم نتوقف عن العمل منذ أن أطلقنا ميزة "انتقالات العرض" في عام 2023. نتطلّع إلى إتاحة عمليات انتقال العرض المحدود النطاق في المستقبل، ويسرّنا دائمًا تلقّي ملاحظاتك.

إذا كان لديك سؤال حول عمليات انتقال العرض، يمكنك التواصل معنا على وسائل التواصل الاجتماعي. يمكن تقديم طلبات ميزات بشأن عمليات الانتقال بين طرق العرض إلى مجموعة عمل CSS. في حال مواجهة خطأ، يُرجى إرسال تقرير عن خلل Chromium لإعلامنا بذلك.