انتقال سلس باستخدام واجهة برمجة التطبيقات View Transition API

Bramus

تمنحك واجهة View Transition API القدرة على إنشاء انتقالات مرئية سلسة بين طرق العرض المختلفة على موقعك الإلكتروني. يؤدي ذلك إلى إنشاء تجربة مستخدم أكثر جاذبية بصريًا أثناء تنقّل المستخدمين في موقعك الإلكتروني، بغض النظر عمّا إذا كان الموقع الإلكتروني مصمّمًا كتطبيق متعدّد الصفحات (MPA) أو تطبيق من صفحة واحدة (SPA).

تشمل الحالات النموذجية التي يمكنك فيها استخدام عمليات انتقال العرض ما يلي:

• هي صورة مصغّرة في صفحة بيانات المنتج تنتقل إلى صورة منتج بالحجم الكامل في صفحة تفاصيل المنتج.
• شريط تنقّل ثابت يبقى في مكانه أثناء التنقّل من صفحة إلى أخرى
• شبكة تتضمّن عناصر تغيّر مواضعها أثناء الفلترة

تنفيذ عمليات نقل العرض

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

يعتمد كلا النوعين من انتقالات العرض على الوحدات الأساسية والمبادئ نفسها:

1. يتخذ المتصفّح لقطات للحالتَين القديمة والجديدة.
2. يتم تعديل نموذج المستند (DOM) أثناء إيقاف العرض.
3. تستند الانتقالات إلى CSS Animations.

الفرق الوحيد بين النوعَين هو طريقة تشغيلهما.

انتقالات العرض في المستند نفسه

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

كيفية تشغيل الميزة

يمكنك بدء عمليات انتقال العرض نفسها في المستند من خلال استدعاء document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

مثال

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

بدء التطوير

راجِع صفحة المستندات المخصّصة للتعرّف على كل ما تحتاج إلى معرفته عن انتقالات العرض في المستند نفسه.

إنشاء انتقالات العرض في المستند نفسه

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

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

كيفية تشغيل الميزة

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

للانضمام، استخدِم مقتطف CSS التالي:

@view-transition {
  navigation: auto;
}

مثال

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

بدء التطوير

تعرَّف على كل ما تحتاج معرفته عن عمليات الانتقال بين طرق العرض في المستندات.

إنشاء انتقالات العرض بين المستندات