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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

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

این تیم در مکان‌های مختلف، انتقال‌های دید را اجرا کرده است. در اینجا نمونه ای از ترکیبی از fade in و slide in انیمیشن در نماد ورود در صفحه اصلی آورده شده است.

کد

این پیاده‌سازی از چندین view-transition-name و انیمیشن‌های سفارشی ( scale-down و scale-up ) استفاده می‌کند. استفاده از view-transition-name با یک مقدار منحصربه‌فرد، مؤلفه sign in را از بقیه صفحه جدا می‌کند تا آن را به طور جداگانه متحرک کند. ایجاد یک view-transition-name منحصر به فرد جدید همچنین یک ::view-transition-group جدید در درخت شبه عنصر ایجاد می کند (در کد زیر نشان داده شده است) که به آن اجازه می دهد جدا از ::view-transition-group(root) دستکاری شود. ::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 ما فوراً در مقایسه با پیاده سازی قبلی بدون هیچ گونه تأثیری، انتقال محو شدن دلپذیرتری دریافت می کنیم - Andy Wihalim ، مهندس ارشد نرم افزار، Tokopedia .

قبل از

بعد از

کد

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

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

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

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

منابع

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

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

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