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

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

सोर्स

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

redBus

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

पहले

बाद में

कोड

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

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

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

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