مشاهده مطالعات موردی انتقال

Swetha Gopalakrishnan

Saurabh Rajpal

انتقال‌های نمایش، انتقال‌های متحرک و یکپارچه بین حالت‌های مختلف یک صفحه وب یا رابط کاربری برنامه هستند. رابط برنامه‌نویسی کاربردی انتقال نمایش به گونه‌ای طراحی شده است که به شما امکان می‌دهد این جلوه‌ها را به روشی ساده‌تر و کارآمدتر از قبل ایجاد کنید. این رابط برنامه‌نویسی مزایای متعددی نسبت به رویکردهای قبلی جاوا اسکریپت ارائه می‌دهد، از جمله:

• تجربه کاربری بهبود یافته: انتقال‌های روان و نشانه‌های بصری، کاربران را در تغییرات رابط کاربری راهنمایی می‌کنند و باعث می‌شوند پیمایش طبیعی و کمتر آزاردهنده به نظر برسد.
• تداوم بصری: حفظ حس تداوم بین نماها، بار شناختی را کاهش می‌دهد و به کاربران کمک می‌کند تا در برنامه جهت‌گیری خود را حفظ کنند.
• عملکرد: این API تلاش می‌کند تا حد امکان از منابع نخ اصلی کمتری استفاده کند که باعث ایجاد انیمیشن‌های روان‌تر می‌شود.
• زیبایی‌شناسی مدرن: انتقال‌های بهبود یافته به یک تجربه کاربری جذاب و بی‌نقص کمک می‌کنند.

این پست بخشی از مجموعه‌ای است که در مورد چگونگی بهبود وب‌سایت شرکت‌های تجارت الکترونیک با استفاده از ویژگی‌های جدید CSS و UI بحث می‌کند. در این مقاله، بررسی کنید که چگونه برخی از شرکت‌ها View Transition API را پیاده‌سازی کرده و از آن بهره‌مند شده‌اند.

ردباس

redBus همیشه سعی کرده است تا حد امکان بین تجربیات بومی و وب خود برابری ایجاد کند. قبل از View Transition API، پیاده‌سازی این انیمیشن‌ها در دارایی‌های وب ما چالش‌برانگیز بود. اما با استفاده از این 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 در مقایسه با پیاده‌سازی قبلی بدون هیچ افکتی، بلافاصله یک گذار محوشونده دلپذیرتر خواهیم داشت . — اندی ویهالیم ، مهندس ارشد نرم‌افزار، توکوپدیا .

قبل از

بعد از

کد

کد زیر از یک چارچوب React استفاده می‌کند و شامل کد مخصوص چارچوب، مانند flushSync. درباره کار با چارچوب‌ها برای پیاده‌سازی انتقال‌های view بیشتر بخوانید. این یک پیاده‌سازی اولیه است که بررسی می‌کند آیا مرورگر از 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 برای عناصر راهنمایی مانند «چرا خرید کنیم» استفاده کرده است که باعث جذابیت بصری و بهبود استفاده از چنین ویژگی‌هایی شده است.

با گنجاندن گذارهای نمایش، کدهای تکراری CSS و جاوا اسکریپت که مسئول مدیریت انیمیشن‌ها در حالت‌های مختلف بودند را حذف کردیم. این کار باعث صرفه‌جویی در تلاش توسعه و بهبود قابل توجه تجربه کاربری شد. — امان سونی ، سرپرست فنی، 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 در نظر بگیرید

هنگام استفاده از چندین جلوه انتقال نما در یک صفحه، مطمئن شوید که برای هر جلوه یا بخش، نام انتقال نمای متفاوتی دارید تا از تداخل جلوگیری شود.

در حالی که یک گذار نما فعال است (در حال گذار)، یک لایه جدید روی بقیه رابط کاربری اضافه می‌کند. بنابراین، از فعال کردن گذار هنگام بردن ماوس روی صفحه (hover) خودداری کنید، زیرا رویداد mouseLeave به طور غیرمنتظره‌ای فعال می‌شود (زمانی که مکان‌نما هنوز حرکت نمی‌کند).

منابع

• انتقال‌های روان و ساده با View Transition API
• توضیح دهنده: مشاهده انتقال برای MPA
• مطالعه موردی: ناوبری یکپارچه با View Transitions امکان‌پذیر شد
• مطالعه موردی: وب چه کارهایی می‌تواند انجام دهد!؟ | ارائه ناوبری‌های شبیه به اپلیکیشن
• پیشنهاد Interop: انتقال‌های نمایش را در مرورگرها در دسترس قرار دهید
• آیا می‌خواهید یک اشکال را گزارش دهید یا ویژگی جدیدی درخواست کنید؟ ما مشتاق شنیدن نظرات شما در مورد SPA و MPA هستیم.

مقالات دیگر این مجموعه را که در مورد چگونگی بهره‌مندی شرکت‌های تجارت الکترونیک از ویژگی‌های جدید CSS و UI مانند انیمیشن‌های Scroll-driven، popover، کوئری‌های container و انتخابگر has() صحبت می‌کنند، بررسی کنید.

• چرا قابلیت‌های رابط کاربری وب برای سایت تجارت الکترونیک شما اهمیت دارد؟
• مطالعات موردی انیمیشن‌های اسکرول‌محور
• مطالعات موردی API پوپ‌اوور
• مطالعات موردی پرس‌وجوهای کانتینری
• مطالعات موردی انتخابگر has() :