واجهة برمجة تطبيقات عرض التحولات: التغييرات السلسة للصفحة والحالة في المتصفح
ما تفعله واجهة برمجة تطبيقات View Transitions، وكيفية عمل انتقالات المستند نفسه والمستندات المشتركة، وكيفية تصميمها باستخدام CSS، وكيفية استخدامها بشكل مسؤول.
الوجبات الجاهزة الأساسية
تتيح واجهة برمجة تطبيقات View Transitions للمتصفح التحرك بين حالتين من الصفحة. اتصل بـ document.startViewTransition() بوظيفة تعمل على تحديث DOM، وسيقوم المتصفح بالتقاط لقطات للعروض القديمة والجديدة وتحريكها، والتي يمكنك تصميمها باستخدام ::عناصر انتقال العرض الزائفة. وهو يعمل ضمن تطبيقات الصفحة الواحدة، وفي دعم المتصفحات، عبر التنقلات بين الصفحات.
كيف يعمل
يصف MDN document.startViewTransition() بأنه يبدأ عملية انتقال لعرض المستند نفسه، وهو أمر نموذجي في تطبيقات الصفحة الواحدة. يلتقط المتصفح العرض الحالي، ويقوم بتشغيل التحديث، ويلتقط العرض الجديد، وينشط بينهما. بشكل افتراضي، يعد ذلك تلاشيًا متقاطعًا؛ يتيح لك CSS تغييره.
نفس الوثيقة والوثيقة المشتركة
يتم تشغيل انتقالات المستند نفسه داخل صفحة واحدة، كما هو الحال في SPA، وقد دعمتها Chrome منذ Chrome 111. تتحرك انتقالات المستندات المشتركة بين صفحات منفصلة في مواقع متعددة الصفحات، وهو ما يشير إليه MDN وكان مستحيلًا تاريخيًا؛ يستخدمون أحداث Pagewap وpagereveal والاشتراك في CSS. يختلف دعم المتصفح بين الاثنين، لذا تحقق من جداول التوافق الحالية.
تصميم المرحلة الانتقالية
معظم التخصيصات بسيطة CSS:
- قم بتسمية أحد العناصر باسم انتقال العرض لتحريكه بشكل منفصل عن بقية الصفحة، مثل الصورة المصغرة التي تنمو لتصبح صورة بطل.
- الهدف ::view-transition-old() و ::view-transition-new() لتخصيص الرسوم المتحركة.
- اجعل الفترات قصيرة وتكون الحركة ذات معنى.
- قم بلف الرسوم المتحركة المخصصة في عمليات التحقق من الحركة المنخفضة المفضلة.
تعزيز تدريجي
تحقق دائمًا من الدعم قبل الاتصال بواجهة برمجة التطبيقات (API)، وقم بتحديث DOM مباشرة إذا كان مفقودًا. يجب أن تعمل الصفحة بشكل مماثل بدون الرسوم المتحركة. تجنب الانتقالات الطويلة أثناء التنقل، والتي تجعل الموقع بأكمله يبدو أبطأ.
مقتطف من تنفيذ الإنتاج
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}مفتاح Principle للتذكر
- startViewTransition() يلتقط لقطات من طرق العرض القديمة والجديدة وينشط بينها
- توجد متغيرات المستند نفسه (SPA) والمستندات المشتركة (متعددة الصفحات).
- نمط مع اسم انتقال العرض و::عناصر زائفة لانتقال العرض
- تحقق من الدعم وارجع إلى التحديث الفوري
- اجعل التحولات قصيرة واحترم الحركة المنخفضة
الأسئلة المتداولة
المصادر
- View Transition API — MDN مستندات الويب
- Smooth transitions with the View Transition API — Chrome للمطورين