في المشهد سريع التطور لتطوير الواجهات الأمامية، تعد تجربة المستخدم أمرًا بالغ الأهمية. يتوقع المستخدمون أن تبدو التطبيقات سريعة الاستجابة وسلسة، وغالبًا ما تحاكي السلوك الأصلي لتطبيقات الهاتف المحمول. تاريخيًا، كان تحقيق انتقالات سلسة بين مختلف المشاهد أو الصفحات يتطلب مكتبات JavaScript معقدة أو رسوم متحركة CSS مبتذلة باستخدام إطارات رئيسية. ومع ذلك، فقد أحدثت واجهة برمجة تطبيقات CSS View Transitions ثورة في الطريقة التي نتعامل بها مع هذه التغييرات، حيث تقدم حلاً أصلياً وقوياً وسهل التنفيذ.
ما هي واجهة برمجة تطبيقات View Transitions؟
تعد واجهة برمجة تطبيقات View Transitions ميزة أصلية في المتصفح مصممة لتمكين الرسوم المتحركة السلسة عند حدوث تغييرات في DOM. وعلى عكس انتقالات CSS التقليدية التي تقوم بتحريك خصائص عنصر واحد (مثل الشفافية أو التحويل)، تقوم هذه الواجهة بتقاطر الحالة المرئية الكاملة للمستند قبل التغيير وبعده، مما يسمح للمتصفح بتحريك الرسوم بين هاتين الحالتين تلقائيًا.
هذا مفيد بشكل خاص لـ:
- التنقل بين الصفحات (تطبيقات الصفحة الواحدة).
- تبديل مكونات واجهة المستخدم (مثل توسيع بطاقة لتصبح ملء الشاشة).
- تحديث المحتوى ديناميكيًا دون قفزات مزعجة.
الاستخدام الأساسي والتنفيذ
يعد تنفيذ انتقالات المشاهد أمرًا مباشرًا بشكل مفاجئ. الطريقة الأساسية هي document.startViewTransition(). تقبل هذه الدالة دالة رد نداء (callback) تحتوي على منطق تحديث DOM. يقوم المتصفح تلقائيًا بأخذ لقطة لـ DOM قبل تشغيل رد النداء وبعد اكتماله، ثم يقوم بتحريك الرسوم بين اللقطتين.
إليك مثال أساسي للانتقال بين مشهدين:
document.querySelector('#toggle-button').addEventListener('click', () => {
// بدء انتقال المشهد
document.startViewTransition(() => {
// تبديل الفئة التي تغير المحتوى
document.querySelector('#container').classList.toggle('expanded');
// أي تحديثات أخرى لـ DOM هنا سيتم تحريكها
const content = document.querySelector('#content');
content.textContent = content.textContent === 'Hello' ? 'Goodbye' : 'Hello';
});
});في هذا المثال، يلتقط المتصفح الحالة قبل تبديل الفئة وتغيير النص، ثم يقوم بالتداخل السلس بين الحالتين الأولية والنهائية.
تخصيص أنماط الانتقال
أحد أقوى ميزات الواجهة هو القدرة على تخصيص كيفية انتقال عناصر محددة. يمكنك استخدام عنصر شبه ::view-transition لتطبيق أنماط مخصصة، مثل التلاشي، أو التكبير، أو التشكل.
على سبيل المثال، لإنشاء تأثير تلاشي بسيط لجميع انتقالات المشاهد، يمكنك استخدام CSS التالي:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
mix-blend-mode: normal;
}
/* اختياري: إضافة انتقال محدد لعنصر له الفئة 'hero' */
::view-transition-old(hero) {
animation-name: fade-out;
}
::view-transition-new(hero) {
animation-name: fade-in;
}يمكنك أيضًا تعريف إطارات رئيسية مخصصة لتأثيرات تشكيل أكثر تعقيدًا، على الرغم من أن دعم المتصفحات للتشكيل التلقائي للصور لا يزال في طور النضج.
التعامل مع تطبيقات الصفحة الواحدة (SPAs)
في تطبيقات الصفحة الواحدة، غالبًا ما تتضمن تغييرات المسار استبدال أجزاء كاملة من DOM. هنا تبرز واجهة برمجة تطبيقات View Transitions لأنها يمكن أن تتعامل مع هذه الاستبدالات بسلاسة دون الحاجة إلى إعادة تحميل الصفحة بالكامل. عند تنفيذ ذلك في موجه توجيه (مثل React Router أو Vue Router)، قم ببساطة بتغليف منطق تغيير المسار داخل document.startViewTransition().
من المهم ملاحظة أنه للحصول على أفضل تجربة، يجب أن تحتوي العناصر في المشاهد "القديمة" و"الجديدة" على خصائص view-transition-name متطابقة إذا كنت تريد من المتصفح تشكيلها بشكل محدد، بدلاً من مجرد التلاشي أو الانزلاق.
...
...
دعم المتصفحات وأفضل الممارسات
بينما تدعم واجهة برمجة تطبيقات View Transitions المتصفحات المستندة إلى Chromium (Chrome، Edge، Opera) وهي في طريقها إلى Firefox وSafari، فمن الضروري استخدام اكتشاف الميزات. قم دائمًا بتغليف كودك في فحص شرطي:
if (document.startViewTransition) {
document.startViewTransition(() => {
// تحديث DOM
});
} else {
// منطق الاحتياطي أو عدم وجود رسوم متحركة
}بالإضافة إلى ذلك، كن على دراية بالأداء. يمكن للأشجار الكبيرة لـ DOM أو الأنماط المعقدة أن تؤثر على سلاسة الانتقالات. اجعل انتقالاتك خفيفة الوزن واختبرها على أجهزة مختلفة.
الخاتمة
تمثل واجهة برمجة تطبيقات CSS View Transitions قفزة كبيرة إلى الأمام في قدرات رسوم الويب المتحركة. من خلال تفويض العمل الشاق للمتصفح، يمكن للمطورين إنشاء رسوم متحركة عالية الجودة والأداء بحد أدنى من الكود. ومع استمرار نمو دعم المتصفحات، سيصبح اعتماد هذه الواجهة ممارسة قياسية لتقديم تجارب مستخدم حديثة تشبه التجربة الأصلية على الويب. ابدأ بالتجربة مع الانتقالات البسيطة اليوم، ودمج تأثيرات التشكل الأكثر تعقيدًا تدريجيًا لرفع مستوى مشاريع الواجهات الأمامية الخاصة بك.