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

Bramus

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

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

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

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

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

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

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

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

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

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

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

مشاركة أنماط الصور المتحركة مع 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],
}););

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