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

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

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

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