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

Bramus

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

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

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

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

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

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

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

إن الشيء الوحيد الذي يختلف بين كلا النوعين هو كيفية تشغيلهما.

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

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

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

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

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

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

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