ट्रांज़िशन की केस स्टडी देखें

Swetha Gopalakrishnan

Saurabh Rajpal

व्यू ट्रांज़िशन, ऐनिमेशन वाले ट्रांज़िशन होते हैं. इनमें वेब पेज या ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) की अलग-अलग स्थितियों के बीच आसानी से ट्रांज़िशन होता है. व्यू ट्रांज़िशन एपीआई को इस तरह से डिज़ाइन किया गया है कि आपको ये इफ़ेक्ट पहले के मुकाबले आसानी से और बेहतर परफ़ॉर्मेंस के साथ मिल सकें. एपीआई, JavaScript के पिछले तरीकों की तुलना में कई फ़ायदे देता है. इनमें ये शामिल हैं:

• बेहतर उपयोगकर्ता अनुभव: यूज़र इंटरफ़ेस (यूआई) में होने वाले बदलावों के दौरान, उपयोगकर्ताओं को आसानी से नेविगेट करने में मदद करने के लिए, स्मूद ट्रांज़िशन और विज़ुअल क्यू का इस्तेमाल किया गया है. इससे नेविगेशन आसान और सहज हो जाता है.
• विज़ुअल कंटिन्यूइटी: व्यू के बीच एक जैसा अनुभव बनाए रखने से, उपयोगकर्ताओं को ऐप्लिकेशन में बने रहने में मदद मिलती है. साथ ही, इससे उपयोगकर्ताओं के दिमाग पर कम दबाव पड़ता है.
• परफ़ॉर्मेंस: एपीआई, मुख्य थ्रेड के ज़्यादा से ज़्यादा संसाधनों का इस्तेमाल करने की कोशिश करता है, ताकि ऐनिमेशन बेहतर तरीके से चल सकें.
• आधुनिक स्टाइल: बेहतर ट्रांज़िशन से, उपयोगकर्ताओं को बेहतर और दिलचस्प अनुभव मिलता है.

यह पोस्ट, एक सीरीज़ का हिस्सा है. इसमें बताया गया है कि ई-कॉमर्स कंपनियां, नई सीएसएस और यूज़र इंटरफ़ेस (यूआई) की सुविधाओं का इस्तेमाल करके, अपनी वेबसाइट को कैसे बेहतर बनाती हैं. इस लेख में जानें कि कुछ कंपनियों ने व्यू ट्रांज़िशन एपीआई को कैसे लागू किया और इससे उन्हें क्या फ़ायदा हुआ.

redBus

redBus हमेशा अपने नेटिव और वेब प्लैटफ़ॉर्म पर, उपयोगकर्ताओं को एक जैसा अनुभव देने की कोशिश करता है. व्यू ट्रांज़िशन एपीआई के आने से पहले, अपनी वेब ऐसेट पर इन ऐनिमेशन को लागू करना मुश्किल था. हालांकि, एपीआई की मदद से, हमें उपयोगकर्ता के कई सफ़र के दौरान ट्रांज़िशन बनाने में आसानी हुई है. इससे वेब पर ऐप्लिकेशन जैसा अनुभव मिलता है. परफ़ॉर्मेंस से जुड़े फ़ायदों के साथ-साथ, यह सुविधा सभी वेबसाइटों के लिए ज़रूरी है.—अमित कुमार, सीनियर इंजीनियरिंग मैनेजर, redBus.

टीम ने कई जगहों पर व्यू ट्रांज़िशन लागू किए हैं. यहां होम पेज पर मौजूद लॉगिन आइकॉन पर, फ़ेड इन और स्लाइड इन ऐनिमेशन के कॉम्बिनेशन का उदाहरण दिया गया है.

कोड

इस तरीके में, कईview-transition-name और कस्टम ऐनिमेशन (scale-down और scale-up) का इस्तेमाल किया जाता है. यूनीक वैल्यू के साथ view-transition-name का इस्तेमाल करने पर, साइन इन कॉम्पोनेंट को पेज के बाकी हिस्से से अलग किया जाता है, ताकि उसे अलग से ऐनिमेट किया जा सके. नया यूनीक view-transition-name बनाने पर, एक नया ::view-transition-group भी बन जाता है. यह ::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 काम करता है या नहीं. अगर 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 के निवेश वर्टिकल ने "खरीदने की वजह" जैसे सहायता सलाह वाले एलिमेंट पर, व्यू ट्रांज़िशन एपीआई का इस्तेमाल किया है. इससे, इन एलिमेंट को विज़ुअल तौर पर आकर्षक बनाया गया है और इन सुविधाओं के इस्तेमाल को बेहतर बनाया गया है.

व्यू ट्रांज़िशन को शामिल करके, हमने अलग-अलग स्टेटस में ऐनिमेशन मैनेज करने के लिए ज़रूरी, बार-बार इस्तेमाल होने वाले सीएसएस और 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;
}

व्यू ट्रांज़िशन एपीआई का इस्तेमाल करते समय ध्यान रखने वाली बातें

एक ही पेज पर कई व्यू ट्रांज़िशन इफ़ेक्ट का इस्तेमाल करते समय, पक्का करें कि आपके पास हर इफ़ेक्ट या सेक्शन के लिए अलग-अलग व्यू-ट्रांज़िशन-नेम हो, ताकि कोई गड़बड़ी न हो.

व्यू ट्रांज़िशन चालू होने पर, यह बाकी यूज़र इंटरफ़ेस (यूआई) के ऊपर एक नई लेयर जोड़ देगा. इसलिए, कर्सर घुमाने पर ट्रांज़िशन ट्रिगर करने से बचें, क्योंकि mouseLeave इवेंट अचानक ट्रिगर हो जाएगा (जब असल कर्सर अब भी नहीं हिल रहा है).

संसाधन

• View Transition API की मदद से आसान और बेहतर ट्रांज़िशन
• एक्सप्लेनर: एमपीए के लिए ट्रांज़िशन देखना
• केस स्टडी: व्यू ट्रांज़िशन की मदद से आसानी से नेविगेट करना
• केस स्टडी: वेब पर क्या-क्या किया जा सकता है!? | ऐप्लिकेशन जैसे नेविगेशन उपलब्ध कराना
• इंटरऑपरेबिलिटी का प्रस्ताव: व्यू ट्रांज़िशन की सुविधा को सभी ब्राउज़र पर उपलब्ध कराना
• क्या आपको किसी गड़बड़ी की शिकायत करनी है या किसी नई सुविधा का अनुरोध करना है? हम SPA और MPA के लिए आपसे सुझाव, शिकायत या राय जानना चाहते हैं.

इस सीरीज़ के अन्य लेख पढ़ें. इनमें बताया गया है कि ई-कॉमर्स कंपनियों को सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं का इस्तेमाल करने से क्या फ़ायदा हुआ. इन सुविधाओं में स्क्रोल से चलने वाले ऐनिमेशन, पॉपओवर, कंटेनर क्वेरी, और has() सिलेक्टर शामिल हैं.

• आपकी ई-कॉमर्स साइट के लिए, वेब यूज़र इंटरफ़ेस (यूआई) की सुविधाएं क्यों ज़रूरी हैं?
• स्क्रोल करने पर चलने वाले ऐनिमेशन की केस स्टडी
• Popover API की केस स्टडी
• कंटेनर क्वेरी की केस स्टडी
• :has() सिलेक्टर की केस स्टडी