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

Bramus

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

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

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

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

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

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

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

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

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

عند تشغيل انتقال عرض على مستند واحد، يطلق عليه انتقال عرض المستند نفسه. ويحدث ذلك عادةً في تطبيقات الصفحة الواحدة (SPA). تتوفر عمليات انتقال عرض المستند نفسه في Chrome من 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 يستخدم انتقالات عرض المستند نفسه لتحريك البطاقات عند إضافة بطاقات جديدة أو إزالتها.

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

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

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

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

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

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

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

لتفعيل الميزة، استخدِم مقتطف CSS التالي:

@view-transition {
  navigation: auto;
}

مثال

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

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

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

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