تتيح لك واجهة برمجة التطبيقات View Transition API تعديل نموذج DOM في خطوة واحدة، مع إنشاء انتقال متحرك بين الحالتَين.
كانت هذه الأنواع من الانتقالات من الميزات التي يطلبها المطوّرون بشكل متكرّر، بما في ذلك أنا، وأعتقد أنّنا نجحنا في طرحها بطريقة توازن بين الإعدادات التلقائية الجيدة وإمكانية التوسيع والتخصيص. قد يبدو أنّنا نمدح أنفسنا، ولكن ملاحظات المطوّرين كانت أساسية في تصميم هذه الميزة. كان النموذج الأوّلي السابق لهذه الميزة أقل مرونة بكثير، ودفعت ملاحظات المستخدمين (مثلك) الذين خصصوا الوقت للعب بالنماذج الأولية وتقديم الملاحظات إلى إعادة التفكير في هذه الميزة بالكامل. شكرًا
للتعرّف على هذه الميزة والاطّلاع على بعض العروض التوضيحية، يمكنك الاطّلاع على دليلنا. إذا كان هناك أي شيء لا يُغطّى في هذه المقالة، يُرجى التواصل معي على Twitter أو Mastodon أو عبر البريد الإلكتروني.
لا تتوفّر واجهة برمجة التطبيقات View Transition API حاليًا إلا في Chrome، ولكن يمكن استخدامها كميزة تحسين تدريجي. يتضمّن الدليل دالة مساعدة يمكنك استخدامها في جميع المتصفّحات، ولكن لن يظهر التأثير المتحرك إلا في المتصفّحات التي تتيح انتقالات العرض.
لقد طوّرنا هذه الميزة ضمن مجموعة عمل CSS، وذلك بفضل الملاحظات والآراء التي قدّمها مورّدو متصفّحات ومطوّرون مستقلون آخرون. لا نعلم ما إذا كانت المتصفّحات الأخرى ستتبنى ميزة "انتقالات العرض" أو متى ستتبنى هذه الميزة، ولكن عليك تتبُّع موقف Mozilla من المعايير وموقف WebKit من المعايير.
لم ننتهي بعد.
إنّ الإصدار 111 من Chrome هو أول إصدار يتضمّن هذه الوظيفة. نأمل أن نكون قد عثرنا على جميع الأخطاء، ولكن يُرجى إبلاغنا بأي مشاكل تعثر عليها على crbug.com، ويُفضّل أن يكون ذلك من خلال إصدار تجريبي مُعدَّل. إذا لم تكن هذه الطريقة مألوفة لك أو مريحة لك، يمكنك التواصل معي على Twitter أو Mastodon أو عبر البريد الإلكتروني، وسأساعدك.
هذا الإصدار هو جزء صغير ولكن نأمل أن يكون مفيدًا من صورة أكبر. لقد وضعنا بعض الخطط لتوسيع نطاق هذه الميزة لضمان توافق القطع التي نشحنها اليوم مع الأجهزة المستقبلية.
إليك لمحة عن أفكارنا. لا يتم ترتيب هذه الميزات حسب الأولوية (قد تكون الميزة الأولى هي الأكثر أهمية بالنسبة إلى الكثير من المستخدمين)، لذا يسرّنا تلقّي ملاحظاتك حول الميزات الأكثر أهمية بالنسبة إليك.
الانتقالات في جميع المستندات
نعتقد أنّ هذا هو الإصدار الذي يريد معظم المطوّرين أن نعمل عليه بعد ذلك، والخبر السارّ هو أنّنا نعمل عليه حاليًا.
تم تصميم واجهة برمجة التطبيقات View Transitions API بحيث يمكنها العمل على مستوى المستندات التي لها مصدر واحد. والفرق الوحيد هو أنّه بدلاً من أن يشير startViewTransition إلى تغيير حالة DOM، سيشير التنقّل نفسه إلى هذا التغيير.
يمكنك العثور على النموذج الأوّلي لهذا الخيار ضمن علامة التبويب chrome://flags/#view-transition-on-navigation. في ما يلي عرض توضيحي بسيط للغاية وعرض توضيحي أكثر تعقيدًا.
لإجراء ذلك، علينا معرفة كيفية تفعيل كل صفحة لعملية النقل. في الوقت الحالي، نستخدم علامة وصفية: <meta name="view-transition" content="same-origin">، ولكننا نعتقد أنّ CSS هو المكان الأفضل لذلك. نريد أيضًا تسهيل معرفة نوع الصفحة التي يتم الانتقال منها، ويُفضّل عدم الحاجة إلى كتابة JavaScript.
هناك الكثير من العمل الذي يجب إنجازه، ونفضّل إطلاق الميزة بشكل "صحيح" بدلاً من إطلاقها بشكل "سريع"، ولكنّها بالتأكيد أولوية بالنسبة إلينا.
الصور المتحركة المستندة إلى أداة الدمج
اخترنا إضافة تأثيرات متحركة للعرض والارتفاع في مجموعات الانتقالات تلقائيًا لأنّه من الأسهل تخصيصها. ومع ذلك، يعني ذلك أنّه يتم تشغيل الصور المتحركة في سلسلة المهام الرئيسية، ما ليس مثاليًا، خاصةً أثناء تحميل الصفحات.
نخطّط لرصد الرسومات المتحرّكة التلقائية والتخصيصات الشائعة، ثم إعادة تفسيرها كرسومات متحرّكة مستندة إلى أداة الدمج لتحسين الأداء بشكلٍ جيد.
عمليات النقل على مستوى النطاق
في الوقت الحالي، يتم تطبيق عمليات النقل في التطبيقات المُنشِئة لصفحات الويب على المستند بأكمله، ولا يمكن تنفيذ عملية نقل واحدة فقط في كل مرة. نريد تقديم ميزة تتيح ضبط نطاق الانتقالات على عنصر معيّن حتى تتمكّن مكوّنات الصفحة المتعدّدة من تشغيل الانتقالات بشكل مستقل.
سيسمح ذلك مثلاً لمشغّل فيديو مضمّن باستخدام عمليات انتقال العرض، في الوقت نفسه الذي يستخدم فيه تطبيق مصغّر مضمّن للمحادثة.
مجموعات الانتقالات المُدمجة
في الوقت الحالي، جميع ::view-transition-group هي أخوة. وغالبًا ما يكون ذلك أمرًا جيدًا، لأنّه يسمح بنقل طرق العرض من حاوية إلى أخرى، ولن تقلق بشأن الاقتصاص.
ومع ذلك، قد تحتاج أحيانًا إلى اقتصاص طريقة عرض من خلال عنصر رئيسي قد يكون مشارِكًا أيضًا في عملية النقل.
نريد التحقيق في عملية تفعيل تضع ::view-transition-group معيّنة ضمن ::view-transition-group أخرى.
فئات الانتقالات
يجب أن يكون كل view-transition-name فريدًا. بهذه الطريقة، نحدّد أنّ عنصرًا معيّنًا هو "العنصر نفسه" من الناحية المفاهيمية على أيّ من جانبَي تغيير DOM، حتى لو لم يكن العنصر نفسه حرفيًا.
ومع ذلك، في بعض الأحيان، يجب أن تستخدم الأشياء التي لها view-transition-name مختلفة النوع نفسه من الصور المتحركة. في الوقت الحالي، يعني ذلك إضافة قاعدة محدّد لكل view-transition-name.
نريد إضافة طريقة لإنشاء فئات من الانتقالات للتغلب على هذا القيد.
تجاهُل العناصر التي لا تظهر على الشاشة
إذا منحت عنصرًا view-transition-name، سيشارك في عملية النقل كمجموعة خاصة به. في بعض الأحيان، لا يكون هذا الإجراء مثاليًا. على سبيل المثال، إذا منحت العنوان view-transition-name، وانتقلت من حالة تم فيها الانتقال للأسفل بمقدار 2000 بكسل إلى حالة في أعلى الصفحة، سيظهر العنوان متحركًا من مسافة 2000 بكسل، ما قد يبدو غير صحيح من حيث التوقيت.
بدلاً من ذلك، نريد إضافة خيار تفعيل لتجاهل عنصر، كما لو لم يكن يحتوي على view-transition-name، إذا كان خارج إطار العرض بالكامل.
يمكنك إجراء ذلك باستخدام JavaScript من خلال ضبط style.viewTransitionName ديناميكيًا، ولكن يبدو أنّنا بحاجة إلى حلّ تعريفي لهذا الغرض.
الصور المتحركة المستندة إلى requestAnimationFrame
يمكنك حاليًا إنشاء رسوم متحركة لنقل العرض باستخدام JavaScript من خلال web animations API، ولكن في بعض الأحيان تحتاج إلى التحكم في كل لقطة باستخدام requestAnimationFrame.
يمكنك إجراء ذلك الآن، ولكنّه يتطلّب بعض الحيلة. إليك عرض توضيحي يتضمن بعض الأدوات التي قد تفيدك. نريد أن نجعلها عملية سهلة.
سننفّذ ذلك على مرحلتين. أولاً، من خلال توفير واجهة برمجة تطبيقات للإشارة إلى وقت انتهاء الصورة المتحركة. وثانيًا، من خلال منح JavaScript إذن الوصول إلى العناصر الزائفة. قد يكون هذا الجزء الثاني مهمة كبيرة جدًا، ولكن يبدو أنّه القرار الصحيح على المدى الطويل.
ننصحك الآن بإنشاء بعض الانتقالات الرائعة بين المشاهد.
نأمل أن تكون هذه الميزة مثيرةً للاهتمام بالنسبة إليك كما هي بالنسبة إليّ. إذا كانت لديك أي ملاحظات أو أردت فقط عرض بعض عمليات النقل بين المشاهد التي أجريتها، سواء كانت سلسة ووظيفية أو بسيطة مضحكة، يُرجى التواصل معي على Twitter أو Mastodon.