व्यू ट्रांज़िशन की मदद से, नेविगेशन को आसान बनाना

Yuriko Hirota
Yuriko Hirota
Saurabh Rajpal
Saurabh Rajpal

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

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

Chrome 111 में लॉन्च किए गए View Transits API की मदद से, पेजों के बीच आसानी से और आसानी से ट्रांज़िशन किए जा सकते हैं. इसकी मदद से, अलग-अलग राज्यों के बीच ओवरलैप किए बिना डीओएम को बदला जा सकता है. साथ ही, स्नैपशॉट वाले व्यू का इस्तेमाल करके, राज्यों के बीच ट्रांज़िशन ऐनिमेशन भी लागू किया जा सकता है.

आप सोच सकते हैं कि इसे लागू करना कितना आसान है? इस्तेमाल के कौनसे उदाहरण मौजूद हैं? दूसरे डेवलपर व्यू ट्रांज़िशन का इस्तेमाल कैसे कर रहे हैं?

इस लेख में, व्यू ट्रांज़िशन को लागू करने के बारे में चार अलग-अलग वेबसाइटों के बारे में बताया गया है: RedBus (यात्रा), CyberAgent (समाचार/ब्लॉग प्रकाशक), Nykaa (ई-कॉमर्स), और PolicyBazaar (बीमा) और यह भी कि उनकी वेबसाइटों को View Transits API का इस्तेमाल करके अलग-अलग तरीकों से कैसे फ़ायदा मिला.

redBus

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

RedB ने व्यू ट्रांज़िशन क्यों लागू किए?

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

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

लागू करने से जुड़ी तकनीकी जानकारी

RedBus, React और EJS को फ़्रंटएंड टेक्नोलॉजी स्टैक के तौर पर इस्तेमाल करता है. साथ ही, इसमें अलग-अलग सफ़र के लिए एसपीए और एमपीए, दोनों का इस्तेमाल होता है. यह कोड का हिस्सा दिखाता है कि व्यू ट्रांज़िशन का इस्तेमाल कैसे किया जाता है:

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

इस सीएसएस में, slide-to-right, slide-to-left, slide-from-right, और slide-from-left सीएसएस ऐनिमेशन वाले मुख्य-फ़्रेम हैं.

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

कारोबार पर असर

RedBus ने अपनी साइट पर आईएनपी को बेहतर बनाने की कोशिशों के साथ-साथ व्यू ट्रांज़िशन को लागू करने का विकल्प चुना. इससे बिक्री में 7% की बढ़ोतरी हुई. RedBus के सीनियर इंजीनियरिंग मैनेजर अमित कुमार ने कहा कि उन लोगों के लिए व्यू ट्रांज़िशन वाकई बहुत अच्छा है जो असल में बेहतर उपयोगकर्ता अनुभव चाहते हैं. साथ ही, वे चाहते हैं कि उन्हें रखरखाव का ज़्यादा समय न लगे.

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

अनूप मेनन, सीटीओ RedBus

CyberAgent

CyberAgent एक जापान की आईटी कंपनी है जो ब्लॉग और न्यूज़ पब्लिशिंग के साथ-साथ कई ऑनलाइन सेवाएं देती है.

CyberAgent ने व्यू ट्रांज़िशन क्यों लागू किए?

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

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

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

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

लागू करने से जुड़ी तकनीकी जानकारी

CyberAgent अपना एसपीए बनाने के लिए Next.js का इस्तेमाल करता है. यह कोड उदाहरण दिखाता है कि वे व्यू ट्रांज़िशन एपीआई का इस्तेमाल कैसे करते हैं.

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

Next.js कोड का कुछ और सैंपल देखें.

प्रीरेंडरिंग तकनीक के साथ MPA के लिए ट्रांज़िशन देखें

CyberAgent ने Ameba News नाम की एक सेवा पर हमारे नए View Transits API (MPA) (जो फ़िलहाल chrome://flags/#view-transition-on-navigation फ़्लैग के नीचे है) को भी आज़माया है. यह एक न्यूज़ पोर्टल साइट है.

व्यू ट्रांज़िशन का इस्तेमाल दो जगहों पर किया गया है: पहला, खबरों की कैटगरी बदलते समय. इसे इस वीडियो में दिखाया गया है.

दूसरा पेज, खबरों से जुड़े हाइलाइट पेज के बीच में होता है, जहां कॉन्टेंट का एक छोटा हिस्सा दिखता है. इसके बाद, जब उपयोगकर्ता ज़्यादा जानकारी देखें पर क्लिक करता है, तब लेख का बाकी हिस्सा धुंधला दिखता है.

दिलचस्प बात यह है कि उन्होंने सिर्फ़ उस हिस्से में ऐनिमेशन जोड़ा है जो बटन क्लिक करने के बाद बदल जाएगा. ऐनिमेशन डिज़ाइन में थोड़ा सा बदलाव करके, अलग-अलग तरह के कॉन्टेंट के लिए MPA पेज, उपयोगकर्ता के हिसाब से एसपीए की तरह दिखता है. इसमें सिर्फ़ नया कॉन्टेंट दिखता है:

उन्होंने ऐसा इस तरह से किया: उन्होंने पेज के अलग-अलग हिस्सों को एक अलग view-transition-name असाइन किया. उदाहरण के लिए, उन्होंने लेख के सबसे ऊपर वाले हिस्से के लिए एक view-transition-name, नीचे के हिस्से के लिए दूसरी, और सबसे ऊपर वाले हिस्से में कोई ऐनिमेशन नहीं जोड़ा.

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

इस डायग्राम में दिखाया गया है कि कैसे पेज के सबसे ऊपरी हिस्से में ऐनिमेशन नहीं दिखता और न ही सबसे नीचे वाला हिस्सा बदल जाता है.

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

import { prerender } from https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

इस लेख से, क्विकलिंक को लागू करने के बारे में ज़्यादा जानकारी मिल सकती है.

प्रशंसापत्र

CyberAgent में Ameba सेवा की टेक लीड कज़ुनारी हारा ने कहा कि व्यू ट्रांज़िशन से कारोबार पर दो वजहों से काफ़ी असर पड़ सकता है.

सबसे पहले, वे पेज पर लोगों को गाइड करते हैं. व्यू ट्रांज़िशन से, उपयोगकर्ताओं को विज़ुअल तौर पर सबसे ज़रूरी मैसेज पर फ़ोकस किया जा सकता है. साथ ही, इससे वेब पेज का ज़्यादा से ज़्यादा फ़ायदा पाने में मदद मिलती है. साथ ही, ये ऐनिमेशन की मदद से ब्रैंड को बेहतर बनाते हैं और उन पर ज़ोर देते हैं. अपने ब्रैंड के बारे में लोगों को बताने के लिए, CyberAgent का ऐनिमेशन डिज़ाइन तय किया गया है. व्यू ट्रांज़िशन की मदद से, वे इस ब्रैंडेड अनुभव को लागू कर सकते हैं. इसके लिए, उन्हें बाहरी लाइब्रेरी के रखरखाव का खर्च नहीं उठाना पड़ता.

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

काज़ुनारी हारा, अमीबा के सीटीओ

Nykaa

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

Nykaa ने व्यू ट्रांज़िशन क्यों लागू किए?

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

लागू करने से जुड़ी तकनीकी जानकारी

नियाका ने अपना एसपीए बनाने के लिए, रिऐक्ट और इमोशन का इस्तेमाल किया. React के साथ व्यू ट्रांज़िशन इस्तेमाल करने के बारे में ज़्यादा सैंपल कोड यहां मिल सकता है.

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

साइड ड्रॉर ऐनिमेशन के लिए सीएसएस:

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

प्रशंसापत्र

Nykaa के ऐप्लिकेशन हेड सुनीत जिंदल ने कहा कि व्यू ट्रांज़िशन का सबसे बड़ा फ़ायदा "स्पीड ऑफ़ स्पीड" है. Nykaa ने बैकएंड से कॉन्टेंट लोड होने का इंतज़ार करने के लिए, शिमर इफ़ेक्ट का इस्तेमाल किया. हालांकि, उन्होंने पाया कि शिमर इफ़ेक्ट दिखाने से, लोगों को यह जानकारी नहीं मिली कि कॉन्टेंट लोड होने के लिए उन्हें कितनी देर इंतज़ार करना होगा. व्यू ट्रांज़िशन के साथ, इस ट्रांज़िशन ने अपने-आप में उपयोगकर्ताओं को "कुछ होने वाला है" का एहसास कराया. इससे लोगों को इंतज़ार करने में कम समय लगा.

नियाका, व्यू ट्रांज़िशन के साथ अपने वेब पेज के बेहतर बनाए गए नए उपयोगकर्ता अनुभव से बहुत उत्साहित हैं. साथ ही, वह दूसरे पेजों पर भी व्यू ट्रांज़िशन लागू करने के लिए तैयार है. डिज़ाइन के वीपी ने यह कहा:

हम आने वाली सभी सुविधाओं में, जहां भी ज़रूरत हो वहां व्यू ट्रांज़िशन लागू करना चाहते हैं. कुछ इलाकों की पहचान पहले ही कर ली गई है और टीम उन पर लगातार काम कर रही है.

कृष्णा आर वी, डिज़ाइन डिपार्टमेंट के वीपी

PolicyBazaar

पारदर्शिता बाज़ार, भारत की सबसे बड़ी इंश्योरेंस एग्रीगेटर और मल्टीनैशनल फ़ाइनेंशियल टेक्नोलॉजी कंपनी है. इसका मुख्यालय गुड़गांव में है.

PolicyBazaar ने व्यू ट्रांज़िशन क्यों लागू किए?

PolicyBazaar की टीम, हमेशा वेब पर काम करने वाली एक कंपनी के तौर पर काम करती है. इसका मकसद, उपयोगकर्ताओं की मुश्किलों के दौरान, उन्हें सबसे अच्छा अनुभव देना है. व्यू ट्रांज़िशन एपीआई के लॉन्च होने से पहले, JavaScript और सीएसएस का इस्तेमाल करके कस्टम ट्रांज़िशन लागू करना आम बात है. इसकी वजह यह है कि इन ट्रांज़िशन से उपयोगकर्ता अनुभव को बेहतर बनाया गया, बिना रुकावट वाला नेविगेशन फ़्लो जनरेट किया गया, और अपनी वेबसाइटों पर आने वाले व्यू को बेहतर बनाया गया.

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

PolicyBazaar ने संभावित खरीदारों के लिए, बीमा पॉलिसी खरीदने से पहले की ज़रूरी जानकारी उपलब्ध कराना मज़ेदार बनाने के लिए, अलग-अलग एलिमेंट पर व्यू ट्रांज़िशन का इस्तेमाल किया.

लागू करने से जुड़ी तकनीकी जानकारी

वे हाइब्रिड फ़्रेमवर्क वाला तरीका इस्तेमाल करते हैं. इसमें Angular और React अपने ज़्यादातर कोडबेस पर हावी होते हैं. यह रहा ऐंग्युलर में लिखे गए उनके कोड से लिया गया वीटी का अंश और इसे अमन सोनी (PolicyBazaar के लीड फ़्रंटएंड डेवलपर) ने शेयर किया है:

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

प्रशंसापत्र

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

वेब के अनुभव को बेहतर बनाना, PB के लिए सबसे अहम मकसद है. इसे हासिल करने में VT की अहम भूमिका रही है. हमारी डेवलपर कम्यूनिटी और यूज़र बेस, दोनों के बीच इस गेम की बढ़ती लोकप्रियता की वजह से, हमारी टीम इसमें काफ़ी दिलचस्पी दिखा रही है. हमारा अनुमान है कि अलग-अलग तरह के पीओडी के साथ इसके इंटिग्रेशन को देखते हुए, हमें उम्मीद है कि लोगों के अनुभव पर इसका बहुत बड़ा असर पड़ेगा. साथ ही, इससे बेहतर तरीके से काम करने में भी मदद मिलेगी.

सौरभ तिवारी (सीटीओ, PolicyBazaar)

अगले चरण

क्या आपको व्यू ट्रांज़िशन को आज़माना है? इन संसाधनों की मदद से ज़्यादा जानकारी पाई जा सकती है: