الاطّلاع على دراسات الحالة حول عمليات النقل

Swetha Gopalakrishnan

Saurabh Rajpal

انتقالات العرض هي انتقالات متحركة وسلسة بين الحالات المختلفة لواجهة مستخدم صفحة الويب أو التطبيق. تم تصميم View Transition API لتتيح لك إنشاء هذه التأثيرات بطريقة أكثر وضوحًا وتنفيذًا من ما كان ممكنًا في السابق. توفر واجهة برمجة التطبيقات مزايا متعددة مقارنة بأساليب JavaScript السابقة بما في ذلك:

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

هذه المشاركة جزء من سلسلة تناقش كيفية تحسين شركات التجارة الإلكترونية لمواقعها الإلكترونية باستخدام الميزات الجديدة في CSS وواجهة المستخدم. في هذه المقالة، اكتشف كيف قامت بعض الشركات بتنفيذ واجهة برمجة التطبيقات View Transition API والاستفادة منها.

redBus

حاولت شركة redBus دائمًا تحقيق أكبر قدر ممكن من التكافؤ بين تجربتها الأصلية وتجربتها على الويب. قبل واجهة برمجة تطبيقات View Transition API، كان تطبيق هذه الرسوم المتحركة على مواد عرض الويب لدينا يمثل تحديًا. ولكن من خلال واجهة برمجة التطبيقات، وجدنا أنّه من البديهي إنشاء انتقالات عبر تجارب متعددة للمستخدمين لجعل تجربة الويب أكثر تشابهًا مع التطبيقات. فضلاً عن ذلك، إلى جانب مزايا الأداء، يجب أن تتوفّر هذه الميزة لجميع المواقع الإلكترونية.—أميت كومار، مدير أول قسم الهندسة في شركة redBus.

نفّذ الفريق انتقالات طرق العرض في أماكن متعددة. وإليك مثال على مزيج من التلاشي للداخل والانزلاق بالحركة على أيقونة تسجيل الدخول على الصفحة الرئيسية.

الرمز

يستخدم هذا التنفيذ عدة صور متحركةview-transition-nameومخصّصة (scale-down وscale-up). ويؤدي استخدام view-transition-name مع قيمة فريدة إلى فصل مكوّن تسجيل الدخول عن باقي الصفحة لتحريكه بشكل منفصل. عند إنشاء view-transition-name فريدة وجديدة، يتم أيضًا إنشاء عنصر ::view-transition-group جديد في شجرة العناصر الزائفة (الموضّحة في الرمز البرمجي التالي)، ما يسمح بمعالجة العنصر بشكل منفصل عن القيمة التلقائية ::view-transition-group(root).

::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)   
└─…

//Code for VT for login
  if (!document.startViewTransition) {
   this.setState(
     {
       closeSigninModal: condition ? true : false
     },
     () => {
       if (closeSigninCb) {
         closeSigninCb();
       }
     }
   );
 } else {
   const transition = document.startViewTransition();
   transition.ready.finally(() => {
     setTimeout(() => {
       this.setState(
         {
           closeSigninModal: condition ? true : false
         },
         () => {
           if (closeSigninCb) {
             closeSigninCb();
           }
         }
       );
     }, 500);
   });
 }

.signin_open {
 view-transition-name: signin;
}

.signin_close  {
 view-transition-name: signinclose;
}

::view-transition-group(signin),
::view-transition-group(signinclose) {
 animation-duration: 0.5s;
}

::view-transition-old(signin) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
 animation-name: -ua-view-transition-fade-in, scale-up;
}

::view-transition-new(signinclose) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}

@keyframes scale-down {
 to {
     scale: 0;
 }
}

@keyframes scale-up {
 from {
     scale: 0;
 }
}

توكوبيديا

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

إنّ عملية التنفيذ سهلة للغاية، فباستخدام startViewTransition، حصلنا على الفور على انتقال سهل الاستخدام مقارنةً بالتنفيذ السابق بدون أي تأثيرات،آندي ويهاليم، كبير مهندسي البرامج في شركة Tokopedia.

قبل

بعد

الرمز

يستخدم الرمز البرمجي التالي إطار عمل React ويتضمن رمزًا خاصًا بإطار العمل، مثل flushSync.يمكنك قراءة المزيد حول العمل باستخدام أُطر العمل لتنفيذ انتقالات العرض. هذه طريقة تنفيذ أساسية تتحقّق مما إذا كان المتصفّح متوافقًا مع startViewTransition، وفي حال توافقه، يتم إجراء عملية النقل. بخلاف ذلك، يعود إلى السلوك الافتراضي.

const handleClick =
  ({ url, index }) =>
  () => {
    if ('startViewTransition' in document) { //check if browser supports VT
      document.startViewTransition(() => {
        flushSync(() => {
          setDisplayImage({ url, index });
          setActiveImageIndex(index);
        });
      });
    } else { //if VT is not supported, fall back to default behavior
      setDisplayImage({ url, index });
      setActiveImageIndex(index);
    }
  };

...

<Thumbnail onClick={handleClick({url, index})} />

بازار السياسات

لقد استخدم قطاع الاستثمار في Policybazaar واجهة برمجة التطبيقات View Transition API لتقديم عناصر إرشادية للمساعدة، مثل "لماذا يجب الشراء"، مما يجعلها جذابة بصريًا وتُحسِّن استخدام هذه الميزات.

من خلال دمج عمليات الانتقال بين العرض، أزلنا رموز CSS وJavaScript المتكررة المسؤولة عن إدارة الصور المتحركة في حالات مختلفة. وقد أدى ذلك إلى توفير جهود التطوير وتحسين تجربة المستخدم بشكل كبير.—أمان سوني، رئيسة قسم التكنولوجيا في Policybazaar.

الرمز

الرمز التالي مشابه للأمثلة السابقة. وتجدر الإشارة إلى القدرة على إلغاء الأنماط والرسوم المتحركة التلقائية لكل من ::view-transition-old(root) و::view-transition-new(root). في هذه الحالة، تم تعديل قيمة animation-duration التلقائية إلى 0.4 ثانية.

togglePBAdvantagePopup(state: boolean) {
  this.showPBAdvantagePopup = state;

  if(!document.startViewTransition) {
    changeState();
    return;
  }

  document.startViewTransition(() => {changeState();});

  function changeState() {
    document.querySelector('.block_section').classList.toggle('hide');
    document.querySelector('.righttoggle_box').classList.toggle('show');
  }
}

.righttoggle_box{
  view-transition-name: advantage-transition;
}

.block_section{
  view-transition-name: advantage-transition;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s;
}

أمور يجب مراعاتها عند استخدام View Transition API

عند استخدام تأثيرات انتقال عرض متعددة في الصفحة نفسها، تأكد من وجود اسم انتقال مختلف لكل تأثير أو قسم لمنع حدوث تضارب.

عندما يكون انتقال طريقة العرض نشطًا (المنتقل)، سيضيف طبقة جديدة أعلى باقي واجهة المستخدم. لذا، تجنَّب بدء عملية الانتقال عند التمرير، لأنّ حدث mouseLeave سيتم تشغيله بشكل غير متوقّع (عندما لا يزال المؤشر الفعلي غير يتحرك بعد).

المراجع

• عمليات نقل سلسة وبسيطة باستخدام واجهة برمجة التطبيقات View Transition API
• العرض التوضيحي: عرض عمليات النقل لموافقة جهات متعددة (MPA)
• دراسة حالة: إتاحة التنقّل السلس باستخدام ميزة "الانتقالات في العرض"
• دراسة حالة: ماذا تفعل شبكة الويب؟ | توفير خيارات تنقل مشابهة للتطبيقات
• اقتراح إمكانية التشغيل التفاعلي: إتاحة انتقالات العرض على جميع المتصفحات
• هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ يهمّنا أن نعرف رأيك بخصوص SPA وMPA.

اطّلِع على المقالات الأخرى ضمن هذه السلسلة التي تتناول كيفية استفادة شركات التجارة الإلكترونية من استخدام ميزات CSS وواجهة المستخدم الجديدة، مثل الصور المتحركة المستندة إلى التمرير والنوافذ المنبثقة وطلبات البحث عن الحاويات وأداة اختيار has().

• ما سبب أهمية إمكانات واجهة مستخدم الويب بالنسبة إلى موقع التجارة الإلكترونية الخاص بك؟
• دراسات حالة حول الصور المتحركة المستندة إلى التمرير
• دراسات حالة حول Popover API
• دراسات حالة حول طلبات البحث في الحاويات
• :has() أداة اختيار دراسات الحالة