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

Bramus

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

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

  • صورة مصغّرة في صفحة بطاقة بيانات المنتج تنتقل إلى صورة المنتج بالحجم الكامل في صفحة تفاصيل المنتج
  • شريط تنقل ثابت يبقى في مكانه أثناء الانتقال من صفحة إلى أخرى
  • شبكة تتضمّن عناصر تتغيّر مواضعها أثناء الفلترة
الانتقالات التي تم إنشاؤها باستخدام واجهة برمجة التطبيقات View Transition API جرِّب الموقع الإلكتروني التجريبي. يتطلّب الإصدار 111 من Chrome أو إصدارًا أحدث.

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

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

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

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

الأمر الوحيد المختلف بين كلا النوعين هو كيفية تشغيلهما.

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

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

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

  • Chrome: 111
  • Edge: 111.
  • Firefox: غير مدعوم.
  • Safari: 18

المصدر

كيفية بدء الإجراء

يمكنك تفعيل عمليات الانتقال لعرض المستند نفسه من خلال طلب الرقم 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());
}

مثال

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

تسجيل العرض التقديمي لميزة "البطاقات" يتطلّب الإصدار 111 من Chrome أو إصدارًا أحدث.

بدء عملية الإنشاء

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

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

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

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

دعم المتصفح

  • Chrome: 126.
  • Edge:‏ 126
  • Firefox: غير متوافق
  • Safari Technology Preview: متاح

كيفية بدء الإجراء

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

للموافقة على هذه الميزة، استخدِم المقتطف التالي من CSS:

@view-transition {
  navigation: auto;
}

مثال

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

تسجيل العرض التوضيحي لتطبيق Stack Navigator يتطلّب الإصدار 126 من Chrome أو إصدارًا أحدث.

بدء عملية الإنشاء

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

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