व्यू ट्रांज़िशन एपीआई के साथ आसान ट्रांज़िशन

Bramus

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

आम तौर पर, व्यू ट्रांज़िशन का इस्तेमाल इन स्थितियों में किया जाता है:

  • प्रॉडक्ट लिस्टिंग पेज पर मौजूद थंबनेल इमेज, जो प्रॉडक्ट की जानकारी वाले पेज पर प्रॉडक्ट की फ़ुल साइज़ इमेज में बदल जाती है.
  • एक फ़िक्स्ड नेविगेशन बार, जो एक पेज से दूसरे पेज पर जाने पर भी अपनी जगह पर बना रहता है.
  • फ़िल्टर करने पर, आइटम की जगहें बदलने वाला ग्रिड.
View Transition API की मदद से बनाए गए ट्रांज़िशन. डेमो साइट आज़माएं. इसके लिए, Chrome 111 या उसके बाद का वर्शन ज़रूरी है.

व्यू ट्रांज़िशन लागू करना

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

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

  1. ब्राउज़र, पुराने और नए स्टेटस के स्नैपशॉट लेता है.
  2. रेंडरिंग रोकने पर, डीओएम अपडेट हो जाता है.
  3. ये ट्रांज़िशन, सीएसएस ऐनिमेशन की मदद से काम करते हैं.

दोनों तरह के ट्रिगर में एक अंतर यह है कि उन्हें ट्रिगर करने का तरीका अलग-अलग होता है.

एक ही दस्तावेज़ के व्यू के बीच ट्रांज़िशन

जब व्यू ट्रांज़िशन किसी एक दस्तावेज़ पर चलता है, तो उसे एक ही दस्तावेज़ का व्यू ट्रांज़िशन कहा जाता है. आम तौर पर, ऐसा एक पेज वाले ऐप्लिकेशन (एसपीए) में होता है. एक ही दस्तावेज़ के व्यू के बीच ट्रांज़िशन की सुविधा, Chrome 111 से Chrome में काम करती है.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

ट्रिगर करने का तरीका

document.startViewTransition को कॉल करके, एक ही दस्तावेज़ के व्यू ट्रांज़िशन को ट्रिगर करें:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

उदाहरण

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

कार्ड डेमो की रिकॉर्डिंग. इसके लिए, Chrome 111 या उसके बाद का वर्शन ज़रूरी है.

वेबसाइट बनाना शुरू करना

एक ही दस्तावेज़ के व्यू ट्रांज़िशन के बारे में पूरी जानकारी पाने के लिए, दस्तावेज़ के लिए बने खास पेज पर जाएं.

एक ही दस्तावेज़ के व्यू के ट्रांज़िशन बनाना

एक दस्तावेज़ से दूसरे दस्तावेज़ में व्यू ट्रांज़िशन

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

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

ट्रिगर करने का तरीका

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

ऑप्ट इन करने के लिए, इस सीएसएस स्निपेट का इस्तेमाल करें:

@view-transition {
  navigation: auto;
}

उदाहरण

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

Stack Navigator के डेमो की रिकॉर्डिंग. इसके लिए, Chrome 126 या उसके बाद का वर्शन ज़रूरी है.

वेबसाइट बनाना शुरू करना

एक दस्तावेज़ से दूसरे दस्तावेज़ पर जाने के ट्रांज़िशन के बारे में पूरी जानकारी पाएं.

एक से ज़्यादा दस्तावेज़ों के व्यू के बीच ट्रांज़िशन बनाना