تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

توافق المتصفّح

المصدر

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

redBus

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

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

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

Policybazaar

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

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

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

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