इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

ब्राउज़र सहायता

Source

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

redBus

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

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

जब उपयोगकर्ता 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;
 }
}

टोकोपीडिया

उपयोगकर्ता के प्रॉडक्ट थंबनेल के बीच स्विच करने पर, टीम ने फ़ेडिंग ऐनिमेशन जोड़ने के लिए व्यू ट्रांज़िशन का इस्तेमाल किया.

इसे लागू करना बहुत आसान है. 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})} />

नीतिबाज़ार

पॉलिसीबाज़ार के निवेश वर्टिकल में "खरीदें क्यों खरीदें" जैसे सहायता सुझाव एलिमेंट पर व्यू ट्रांज़िशन एपीआई का इस्तेमाल किया गया है. इससे ये दिखने में आकर्षक होते हैं और इस तरह की सुविधाओं के इस्तेमाल को बेहतर बनाया जाता है.

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

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

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