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

Bramus

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

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

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

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

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

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

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

दोनों तरह के विज्ञापनों में सिर्फ़ एक अंतर होता है. वह यह है कि इन्हें ट्रिगर कैसे किया जाता है.

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

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

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

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 126 और इसके बाद के वर्शन पर काम करती है.

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

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

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

@view-transition {
  navigation: auto;
}

उदाहरण

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

बनाना शुरू करें

क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन के बारे में पूरी जानकारी पाएं.

एक से दूसरे दस्तावेज़ पर जाने के दौरान दिखने वाले ट्रांज़िशन बनाना