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

سوئتا گوپالاکریشنان
Swetha Gopalakrishnan
X
ساوراب راجپال
Saurabh Rajpal
X

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

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

پشتیبانی مرورگر

  • 111
  • 111
  • ایکس
  • ایکس

منبع

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

redBus

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

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

هنگامی که کاربر روی نماد ورود به سیستم در صفحه اصلی redBus کلیک می‌کند، محو و اسلاید در انتقال‌های نمایش مشاهده می‌شود.

کد

این پیاده‌سازی از چندین 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 Transitions API در عناصر راهنمایی مانند "چرا خرید" استفاده کرده است، که آنها را از نظر بصری جذاب کرده و استفاده از چنین ویژگی هایی را بهبود می بخشد.

با ترکیب View Transitions، کدهای تکراری CSS و جاوا اسکریپت که مسئول مدیریت انیمیشن ها در حالت های مختلف بودند را حذف کردیم. این باعث صرفه جویی در تلاش توسعه و افزایش قابل توجهی تجربه کاربر شد.- Aman Soni ، مدیر فنی، Policybazaar .

انیمیشن انتقال را در CTA "چرا از 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 در نظر بگیرید

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

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

منابع

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