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

Bramus

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

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

• مشاركة أنماط الصور المتحركة بين العناصر الصورية التي تظهر أثناء الانتقال من خلال view-transition-class.
• انتقالات عرض انتقائية مع أنواع نشطة.

تنطبق هذه التحسينات على عمليات انتقال عرض المستند نفسه لتطبيقات الصفحة الواحدة (SPA) وعمليات انتقال عرض جميع المستندات لموافقة جهات متعددة.

عمليات انتقال عرض جميع المستندات لـ MPA

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

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

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

عرض توضيحي

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

هذه طلب موافقة متعددة اللاعبين مع عمليات تنقل بين المستندات وتتم استضافتها على المصدر نفسه. باستخدام 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 أيضًا بعض التحسينات للتعامل مع عمليات انتقال العرض بشكل عام.

تنطبق هذه التحسينات على عمليات انتقال عرض المستند نفسه في SPA وعمليات انتقال عرض جميع المستندات لموافقة جهات متعددة.

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

حتى الآن، عند تحريك لقطات متعددة بالطريقة نفسها، يجب استهداف كل لقطة على حدة من خلال تكرار أداة الاختيار الصورية لكل عنصر يتضمّن السمة 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، يُرجى قراءة المستندات المخصّصة على view-transition-class.

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

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

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

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

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

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

const direction = determineBackwardsOrForwards();

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

للانتقال إلى عرض على مستوى المستندات المختلفة، يمكنك ضبط الأنواع في القاعدة @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 بدلاً من ذلك.