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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

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

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

कोड

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

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 के निवेश वर्टिकल ने "क्यों खरीदें" जैसे सहायता टिप एलिमेंट पर View Transition API का इस्तेमाल किया है. इससे ये एलिमेंट देखने में ज़्यादा आकर्षक लगते हैं और ऐसी सुविधाओं का इस्तेमाल बेहतर तरीके से किया जा सकता है.

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

View Transition API का इस्तेमाल करते समय ध्यान रखने वाली बातें

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

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

संसाधन

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

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

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