الميزات الجديدة في عمليات انتقال العرض (تحديث 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;
}

يمكنك الاطّلاع على مستندات React<ViewTransition> للحصول على جميع التفاصيل أو مشاهدة هذا الفيديو من تقديم 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 لإعلامنا بذلك.