व्यू ट्रांज़िशन एपीआई: ब्राउज़र में सहज पृष्ठ और स्थिति परिवर्तन
व्यू ट्रांज़िशन एपीआई क्या करता है, समान-दस्तावेज़ और क्रॉस-डॉक्यूमेंट ट्रांज़िशन कैसे काम करते हैं, उन्हें CSS के साथ कैसे स्टाइल करें और उन्हें जिम्मेदारी से कैसे उपयोग करें।
कोर टेकअवे
व्यू ट्रांज़िशन एपीआई ब्राउज़र को एक पृष्ठ की दो स्थितियों के बीच एनिमेट करने देता है। DOM को अपडेट करने वाले फ़ंक्शन के साथ document.startViewTransition() को कॉल करें, और ब्राउज़र पुराने और नए दृश्यों को स्नैपशॉट लेता है और उनके बीच एनिमेट करता है, जिसे आप ::view-transition छद्म-तत्वों के साथ स्टाइल कर सकते हैं। यह सिंगल-पेज ऐप्स के भीतर और पेज नेविगेशन में सहायक ब्राउज़रों में काम करता है।
यह काम किस प्रकार करता है
MDN document.startViewTransition() को समान-दस्तावेज़ दृश्य संक्रमण शुरू करने के रूप में वर्णित करता है, जो एकल-पृष्ठ ऐप्स में विशिष्ट होता है। ब्राउज़र वर्तमान दृश्य को कैप्चर करता है, आपका अपडेट चलाता है, नए दृश्य को कैप्चर करता है, और उनके बीच एनिमेट करता है। डिफ़ॉल्ट रूप से यह एक क्रॉस-फ़ेड है; CSS आपको इसे बदलने की सुविधा देता है।
समान-दस्तावेज़ और क्रॉस-दस्तावेज़
समान-दस्तावेज़ परिवर्तन एक पृष्ठ के अंदर चलते हैं, जैसा कि एसपीए में होता है, और Chrome ने Chrome 111 के बाद से उनका समर्थन किया है। बहु-पृष्ठ साइटों में अलग-अलग पृष्ठों के बीच क्रॉस-दस्तावेज़ संक्रमण चेतन होते हैं, जो MDN नोट्स ऐतिहासिक रूप से असंभव थे; वे पेजस्वैप और पेजरिवील इवेंट और CSS में ऑप्ट-इन का उपयोग करते हैं। ब्राउज़र समर्थन दोनों के बीच भिन्न है, इसलिए वर्तमान संगतता तालिकाएँ जाँचें।
संक्रमण को स्टाइल करना
अधिकांश अनुकूलन सादा CSS है:
- किसी तत्व को शेष पृष्ठ से अलग से एनिमेट करने के लिए एक दृश्य-संक्रमण-नाम दें, जैसे कि एक थंबनेल एक नायक छवि में विकसित हो रहा है।
- एनीमेशन को अनुकूलित करने के लिए लक्ष्य ::view-transition-old() और ::view-transition-new()।
- अवधि छोटी और गति सार्थक रखें।
- कस्टम एनिमेशन को प्रेफरेंस-रिड्यूस्ड-मोशन चेक में लपेटें।
प्रगतिशील वृद्धि
एपीआई को कॉल करने से पहले हमेशा समर्थन की जांच करें, और यदि DOM गायब है तो उसे सीधे अपडेट करें। पेज को एनीमेशन के बिना भी समान रूप से काम करना चाहिए। नेविगेशन पर लंबे ट्रांज़िशन से बचें, जिससे पूरी साइट धीमी लगती है।
उत्पादन कार्यान्वयन स्निपेट
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}याद रखने योग्य कुंजी Principle
- स्टार्टव्यूट्रांज़िशन() पुराने और नए दृश्यों का स्नैपशॉट लेता है और उनके बीच एनिमेट करता है
- समान-दस्तावेज़ (एसपीए) और क्रॉस-दस्तावेज़ (बहु-पृष्ठ) वेरिएंट मौजूद हैं
- दृश्य-संक्रमण-नाम और ::दृश्य-संक्रमण छद्म-तत्वों के साथ शैली
- समर्थन की जाँच करें और तत्काल अपडेट पर वापस जाएँ
- ट्रांज़िशन को छोटा रखें और कम गति का सम्मान करें
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- View Transition API — MDN वेब डॉक्स
- Smooth transitions with the View Transition API — डेवलपर्स के लिए Chrome