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

Bramus

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

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

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

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

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

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

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

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

مشاركة أنماط الصور المتحركة مع 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 بدلاً من ذلك.