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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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