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

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(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 का इस्तेमाल करने पर, हम तुरंत लागू हो जाते हैं पिछले तरीकों की तुलना में बेहतर फ़ेडिंग ट्रांज़िशन पाएं बिना किसी प्रभाव के—एंडी विहलीम, सीनियर सॉफ़्टवेयर इंजीनियर, टोकोपीडिया.

पहले

बाद में

कोड

यह कोड, 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 को हटा दिया है ऐसा कोड जो अलग-अलग राज्यों में ऐनिमेशन को मैनेज करने के लिए ज़िम्मेदार है. यह सेव हो गया उपयोगकर्ता अनुभव को काफ़ी बेहतर बनाया है.—अमान सोनी, टेक लीड, पारदर्शिता बाज़ार.

कोड

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

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

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