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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

لطالما حاولت شركة redBus تحقيق أكبر قدر ممكن من التكافؤ بين تجاربها الأصلية وتجربتها على الويب. قبل استخدام View Transitions 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 Transitions 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 Transitions API

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

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

المراجع

• عمليات نقل سلسة وبسيطة باستخدام واجهة برمجة التطبيقات View Transitions API
• شرح: الاطّلاع على انتقالات الإعلانات المتعددة الأطراف
• دراسة حالة: أصبحت التنقّل السلس ممكنًا باستخدام "عناصر التحكّم في العرض"
• دراسة حالة: The Web Can Do What!? | توفير تنقّلات تشبه التطبيقات
• اقتراح إمكانية التشغيل التفاعلي: إتاحة انتقالات طرق العرض على جميع المتصفّحات
• هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ يهمّنا معرفة رأيك بشأن SPA وMPA.

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

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