ما الجديد في انتقالات العرض؟ (تعديل على مؤتمر Google I/O لعام 2024)

Bramus

تاريخ النشر: 16 أيار (مايو) 2024

في مؤتمر Google I/O لعام 2024، أعلنّا عن الخطوة التالية في عمليات النقل بين طرق العرض: عمليات النقل بين طرق العرض في المستندات للتطبيقات المتعدّدة الصفحات (MPA).

بالإضافة إلى ذلك، شاركنا بعض التحسينات التي تتيح لك العمل بسهولة أكبر مع عمليات انتقال العرض بشكل عام.

  • مشاركة أنماط الصور المتحركة بين العناصر الزائفة لنقل العرض باستخدام view-transition-class
  • عمليات النقل الانتقائية للعرض مع الأنواع النشطة

تنطبق هذه التحسينات على كلّ من عمليات الانتقال إلى عرض المستند نفسه في تطبيقات الصفحة الواحدة (SPA) وعمليات الانتقال إلى عرض المستندات الأخرى في تطبيقات الويب المتعددة الصفحات (MPA).

الانتقالات بين طرق عرض المستندات في "الإعلانات المتجاوبة على شبكة البحث"

توافق المتصفّح

  • Chrome: 126
  • Edge: ‏ 126
  • Firefox: غير متوافق
  • Safari Technology Preview: متاح

في الإصدار 111 من Chrome، طرح فريق Chrome عمليات النقل بين طرق عرض المستند نفسه في التطبيقات المكوّنة من صفحة واحدة، وهي ميزة تلقّت ترحيبًا كبيرًا في منتدى إنشاء الويب.

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

انتقال عرض المستند نفسه كما هو ظاهر على Airbnb

ومع ذلك، كان التنفيذ الأولي يتطلّب منك إنشاء تطبيق متعدّد الصفحات لاستخدام عمليات انتقال العرض. اعتبارًا من الإصدار 126 من Chrome، لم يعُد هذا هو الحال، إذ تم تفعيل عمليات انتقال العرض تلقائيًا للتنقّلات من مصدر مماثل. يمكنك الآن إنشاء انتقال عرض بين مستندَين مختلفَين من المصدر نفسه.

لتفعيل عمليات الانتقال بين طرق العرض في المستندات، يجب أن توافق كلتا النقطتَين. لإجراء ذلك، استخدِم قاعدة at-rule‏ @view-transition واضبط وصف navigation على auto.

@view-transition {
  navigation: auto;
}

تستخدم عمليات الانتقال بين طرق العرض في المستندات المختلفة الوحدات الأساسية والمبادئ نفسها المستخدَمة في عمليات الانتقال بين طرق العرض في المستند نفسه. يتمّ تسجيل العناصر التي تمّ تطبيق view-transition-name عليها، ويمكنك تخصيص الصور المتحرّكة باستخدام رسوم CSS المتحرّكة.

لتخصيص عمليات انتقال العرض على مستوى المستندات المختلفة، استخدِم الحدثَين pageswap وpagereveal، اللذَين يتيحان لك الوصول إلى عنصر انتقال العرض.

  • باستخدام pageswap، يمكنك إجراء بعض التغييرات في اللحظة الأخيرة على الصفحة التي سيتم استبدالها قبل أخذ اللقطات القديمة مباشرةً.
  • باستخدام pagereveal، يمكنك تخصيص الصفحة الجديدة قبل بدء عرضها بعد بدء تشغيلها.

في كلتا الحالتَين، يمكنك الوصول إلى عنصر NavigationActivation من أجل تخصيص انتقال العرض على مستوى المستندات استنادًا إلى إدخالات سجلّ الوجهة القديم والجديد أو نوع التنقّل.

بالإضافة إلى ذلك، يمكنك الانتظار إلى أن يتم تحميل المحتوى باستخدام ميزة حظر العرض والاعتماد على العرض المُسبَق لتحسين وقت التحميل قبل تشغيل عملية انتقال العرض.

عرض توضيحي

يجمع العرض التوضيحي لتطبيق Stack Navigator كل هذه الميزات (بالإضافة إلى بعض التحسينات).

تسجيل العرض التوضيحي لتطبيق Stack Navigator ويستخدم هذا الإجراء عمليات انتقال بين طرق العرض في المستندات المختلفة تم تخصيصها في الحدث pagereveal استنادًا إلى معلومات تفعيل التنقّل. ويتم أيضًا استخدام ميزة "العرض المُسبَق".

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

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

قراءة المستندات

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

الاطّلاع على تحسينات الانتقالات

بالإضافة إلى توفير انتقالات بين طرق العرض في المستندات المختلفة لميزة "الإعلانات المتجاوبة على شبكة البحث"، يتضمّن Chrome أيضًا بعض التحسينات على استخدام انتقالات طرق العرض بشكل عام.

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

مشاركة أنماط الصور المتحركة مع view-transition-class

توافق المتصفّح

  • Chrome: 125
  • الحافة: 125
  • Firefox: غير متوافق
  • ‫Safari: 18.2

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

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

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

يستخدِم مثال البطاقات التالي view-transition-class لتطبيق توقيت الرسوم المتحركة نفسه على العديد من اللقطات باستخدام أداة اختيار واحدة.

تسجيل العرض التقديمي لميزة "البطاقات" باستخدام view-transition-class، يتم تطبيق animation-timing-function نفسه على جميع البطاقات باستثناء البطاقات التي تمت إضافتها أو إزالتها.

لمعرفة المزيد من المعلومات عن view-transition-class، يمكنك الاطّلاع على المستندات المخصّصة حول view-transition-class.

عمليات النقل الانتقائية للعرض مع الأنواع النشطة

توافق المتصفّح

  • Chrome: 125
  • الحافة: 125
  • Firefox: غير متوافق
  • Safari: 18

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

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

تسجيل العرض التوضيحي لميزة "الفهرسة حسب الصفحات" تحدِّد الأنواع الصورة المتحركة التي سيتم استخدامها. يتم فصل الأنماط في جدول الأنماط بفضل أنواع الانتقالات النشطة.

قبل الأنواع النشطة، كان بإمكانك إضافة فئات إلى نموذج DOM والاستجابة لهذه الفئات في CSS. ومع ذلك، عليك أيضًا تنظيف المساحة بعد اكتمال عمليات النقل.

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

لنقل الاطّلاع على نفس المستند، يمكنك تمرير types إلى طريقة startViewTransition التي تقبل الآن عنصرًا. update هي دالة ردّ الاتصال التي تعدّل نموذج DOM، وtypes هي تسلسل سلاسل.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

لنقل العرض على مستوى مستندات متعددة، يمكنك ضبط الأنواع في قاعدة at-rule‏ @view-transition باستخدام الوصف types أو ضبطها أثناء التشغيل في حدثَي pageswap وpagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

بعد ضبط الأنواع، يمكنك الردّ على هذه الأنواع في CSS باستخدام أدوات اختيار الفئات الزائفة :active-view-transition-type() و:active-view-transition التي تنطبق على جذر انتقال العرض.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

لمعرفة المزيد من المعلومات عن أنواع انتقالات العرض، يُرجى الرجوع إلى المستندات المخصّصة لانتقالات العرض في المستند نفسه ولانتقالات العرض بين المستندات.

ملاحظات

نحن نقدِّر دائمًا ملاحظات المطوّرين. لإجراء ذلك، يُرجى إرسال مشكلة إلى مجموعة عمل CSS على GitHub مع تضمين اقتراحات وأسئلة. أضِف [css-view-transitions] إلى بداية مشكلتك.

إذا واجهت خللاً، يُرجى إرسال تقرير عن خلل في Chromium بدلاً من ذلك.