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

Bramus

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

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

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

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

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

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

  • 126
  • 126
  • x
  • x

المصدر

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

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

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

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

وفوق كل ذلك، يمكنك انتظار تحميل المحتوى مع حظر العرض والاعتماد على العرض المسبق لتحسين وقت التحميل قبل تشغيل انتقال العرض.

عرض توضيحي

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

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

هذا التنسيق هو MPA، وهو يتضمّن عمليات تنقل بين المستندات المختلفة، وتتم استضافته على المصدر نفسه. باستخدام ميزة 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;
  }
});

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

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

عرض التحسينات المتعلّقة بعمليات النقل

إلى جانب شحن انتقالات العرض عبر المستندات لـ MPA، يتضمن Chrome أيضًا بعض التحسينات للتعامل مع انتقالات العرض بشكل عام.

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

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

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

  • 125
  • 125
  • x
  • x

حتى الآن، عند إنشاء لقطات متحرّكة متعددة بالطريقة نفسها، كان مطلوبًا منك استهداف كل لقطة على حدة عن طريق تكرار أداة الاختيار الزائفة لكل عنصر يحتوي على 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.

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

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

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

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

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