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

Bramus

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

कुछ ऐसी सामान्य स्थितियां जिनमें आपको व्यू ट्रांज़िशन का इस्तेमाल करना होगा:

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

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

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

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

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

दोनों टाइप में जो बात अलग है वह यह है कि आपने उन्हें कैसे ट्रिगर किया.

एक ही दस्तावेज़ वाले व्यू में बदलाव

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

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

  • Chrome: 126. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 126. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

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

@view-transition {
  navigation: auto;
}

उदाहरण

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

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

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

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

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