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

Bramus

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

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

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

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

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

عمليات الانتقال بين طرق العرض للمستندات المتعددة الصفحات

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

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

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

عرض توضيحي

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

هذا هو تطبيق 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;
  }
});

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

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

تحسينات على عمليات النقل

بالإضافة إلى إتاحة عمليات انتقال العرض بين المستندات لتطبيقات الصفحات المتعددة، يتضمّن 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],
}););

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