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

Bramus

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

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

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

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

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

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

1. ब्राउज़र पुरानी और नई स्थितियों का स्नैपशॉट लेता है.
2. रेंडरिंग को बंद करने पर, डीओएम अपडेट हो जाता है.
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());
}

उदाहरण

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

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

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

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

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

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

ट्रिगर कैसे करें

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

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

@view-transition {
  navigation: auto;
}

उदाहरण

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

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

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

क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन बनाना