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

Swetha Gopalakrishnan

Saurabh Rajpal

عرض الانتقالات في شكل صور متحركة وسلسة بين حالات مختلفة لواجهة مستخدم صفحة ويب أو تطبيق. تشير رسالة الأشكال البيانية عرض واجهة 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;
 }
}

Tokopedia

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

يُعد التنفيذ سهلاً للغاية، وباستخدام 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})} />

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

لبازار السياسات الاستثمار موضع الإعلان واجهة برمجة التطبيقات 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)
• دراسة حالة: إتاحة التنقّل السلس باستخدام ميزة "الانتقالات في العرض"
• دراسة حالة: ماذا تفعل شبكة الويب؟ | تقديم تفاصيل تنقل تشبه التطبيقات
• اقتراح إمكانية التشغيل التفاعلي: إتاحة انتقالات العرض على جميع المتصفحات
• هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ نريد أن نعرف منك المنتجع الصحي وMPA

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

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