प्रॉम्प्ट और संदर्भ
एक उत्पाद नेटिव नेविगेशन, एक्सेसिबिलिटी या लो-एंड परफॉरमेंस से समझौता किए बिना सूची, विवरण और फ़िल्टर किए गए दृश्यों के बीच सुसंगत ट्रांज़िशन चाहता है। एक प्रोग्रेसिव एन्हांसमेंट योजना डिज़ाइन करें: सेम-डॉक्यूमेंट अपडेट के लिए document.startViewTransition() का उपयोग करें, क्रॉस-डॉक्यूमेंट नेविगेशन के लिए CSS घोषणाओं का उपयोग करें, और बताएं कि जब API अनुपलब्ध हो, DOM अपडेट विफल हो जाए, या उपयोगकर्ता रिड्यूस्ड मोशन पसंद करता हो तो क्या व्यवहार होगा।
यह फ़्रंटएंड, डिज़ाइन-सिस्टम और परफ़ॉर्मेंस भूमिकाओं के लिए उपयुक्त है। MDN, Chrome for Developers, और CSS View Transitions विनिर्देश ViewTransition लाइफ़साइकिल, सेम-डॉक्यूमेंट और क्रॉस-डॉक्यूमेंट तंत्र, स्यूडो-एलिमेंट एनीमेशन ट्री और स्किप व्यवहार को परिभाषित करते हैं। यह लेख सार्वजनिक मानकों से लिया गया है, किसी कंपनी के इंटरव्यू बैंक का दावा नहीं है।
इंटरव्यूअर क्या मूल्यांकन करता है
इंटरव्यूअर यह परीक्षण कर रहा है कि क्या आप नेविगेशन सिमेंटिक्स, DOM अपडेट्स, एनीमेशन लाइफ़साइकिल और फॉलबैक सीमाओं को अलग करते हैं। एक मजबूत उत्तर में ready, updateCallbackDone, finished, skipTransition(), prefers-reduced-motion, विशिष्ट view-transition-name मान और सेम-ओरिजिन सीमाओं का उल्लेख होता है। एक कमजोर उत्तर विफलता योजना के बिना सिर्फ एक फ़ेड-इन CSS नियम जोड़ता है।
स्पष्टीकरण के लिए प्रश्न
- क्या लक्ष्य SPA स्टेट परिवर्तन है, क्रॉस-डॉक्यूमेंट नेविगेशन है, या दोनों?
- किन तत्वों को साझा पहचान की आवश्यकता है, और क्या विवरण खोलते समय सूची कार्ड में स्थिर IDs हैं?
- क्या कोर नेविगेशन और इंडेक्सिंग बिना जावास्क्रिप्ट के काम करने चाहिए?
- उत्पाद के पास एनीमेशन अवधि, लो-एंड डिवाइस बजट और रिड्यूस्ड-मोशन की क्या आवश्यकताएं हैं?
30-सेकंड का उत्तर
“मैं नेटिव नेविगेशन और स्टेट अपडेट को स्रोत सत्य (source of truth) के रूप में रखूँगा और प्रोग्रेसिव एन्हांसमेंट के रूप में View Transitions का उपयोग करूँगा। SPA के लिए, startViewTransition(update) में सिंक्रोनस या एसिंक्रोनस DOM अपडेट को लपेटें और ready के बाद स्यूडो-एलिमेंट्स को एनिमेट करें; मल्टी-पेज नेविगेशन के लिए, साझा तत्वों के लिए स्थिर नामों के साथ सेम-ओरिजिन @view-transition { navigation: auto; } का उपयोग करें। यदि API गायब है, अपडेट विफल हो जाता है, या रिड्यूस्ड मोशन का अनुरोध किया जाता है, तो बिना एनीमेशन के अपडेट पूरा करें और आवश्यकता पड़ने पर skipTransition() को कॉल करें। विशिष्ट नाम, टाइमआउट और मेट्रिक्स ट्रांज़िशन को उत्पाद व्यवहार को अवरुद्ध करने से रोकते हैं।”
चरण-दर-चरण समाधान
सेम-डॉक्यूमेंट ट्रांज़िशन के लिए, document.startViewTransition(() => update()) को कॉल करें। ब्राउज़र पुरानी स्थिति को कैप्चर करता है, अपडेट कॉलबैक चलाता है, और नई स्थिति बनाता है; लौटाया गया ViewTransition ready, updateCallbackDone, और finished प्रॉमिस को उजागर करता है। यदि कॉलबैक कोई एरर थ्रो करता है, तब भी एप्लिकेशन के पास त्रुटि प्रबंधन का स्वामित्व होता है; व्यावसायिक सबमिशन एनीमेशन की सफलता पर निर्भर नहीं होना चाहिए। ::view-transition-old(root) और ::view-transition-new(root) जैसे स्यूडो-एलिमेंट्स के साथ ट्रांज़िशन को कस्टमाइज़ करें।
किसी पुराने तत्व को उसके नए समकक्ष के साथ जोड़ने के लिए view-transition-name का उपयोग करें। एक ट्रांज़िशन ट्री में नाम अद्वितीय होने चाहिए। सूचियों को ऐरे इंडेक्स के बजाय स्थिर व्यावसायिक IDs की आवश्यकता होती है, अन्यथा सॉर्टिंग या फ़िल्टरिंग गलत तत्वों को जोड़ देती है। केवल महत्वपूर्ण तत्वों को नाम दें; बहुत अधिक स्नैपशॉट और कंपोज़िटर सतहें लागत बढ़ाती हैं।
क्रॉस-डॉक्यूमेंट ट्रांज़िशन सेम-ओरिजिन नेविगेशन और CSS @view-transition घोषणा पर निर्भर करते हैं; जावास्क्रिप्ट नेविगेशन के लिए startViewTransition() को कॉल नहीं करता है। यह मल्टी-पेज अनुप्रयोगों के लिए काम करता है लेकिन ब्राउज़र समर्थन, सेम-ओरिजिन नीति और पेज CSS पर निर्भर करता है। एक लिंक को अभी भी ट्रांज़िशन के बिना सामान्य रूप से नेविगेट करना चाहिए; एक एनीमेशन प्रॉमिस को सर्वर प्रतिक्रिया या डिफ़ॉल्ट लिंक व्यवहार को अवरुद्ध नहीं करना चाहिए।
लाइफ़साइकिल हैंडलिंग के लिए टाइमआउट और स्किप पाथ की आवश्यकता होती है। यदि ready बजट के भीतर सेटल नहीं होता है, तो कारण रिकॉर्ड करें और skipTransition() को कॉल करें। बैक नेविगेशन, फ़ॉर्म सबमिशन और पेज छोड़ने पर नेविगेशन को प्राथमिकता दी जानी चाहिए। finished का उपयोग केवल क्लीनअप और मेट्रिक्स के लिए करें, कभी भी डेटा सहेजे जाने के प्रमाण के रूप में नहीं। एसिंक्रोनस डेटा के लिए, ट्रांज़िशन की प्रतीक्षा करने का निर्णय लेने से पहले स्टेट-कमिट सीमा को परिभाषित करें।
एक्सेसिबिलिटी का अर्थ है एनीमेशन अवधि को शून्य पर सेट करके या इसे छोड़ कर @media (prefers-reduced-motion: reduce) का सम्मान करना। फ़ोकस, हेडिंग्स और पढ़ने के क्रम को सुरक्षित रखें; दृश्य स्थिति सिमेंटिक अपडेट की जगह नहीं ले सकती। कीबोर्ड उपयोगकर्ताओं, स्क्रीन पाठकों और धीमे उपकरणों को समान सामग्री परिणाम प्राप्त होना चाहिए।
प्रोग्रेसिव एन्हांसमेंट वास्तविक नेविगेशन फ़ॉलबैक के साथ क्षमता का पता लगाने को जोड़ता है। यदि document.startViewTransition अनुपस्थित है, तो सीधे अपडेट फ़ंक्शन को कॉल करें; यदि क्रॉस-डॉक्यूमेंट समर्थन अनुपस्थित है, तो सामान्य लिंक बनाए रखें। ब्राउज़र और डिवाइस द्वारा समर्थन दर, स्किप दर, ready विलंबता, फ़्रेम दर और इंटरैक्शन विलंबता को मापें। एक ट्रांज़िशन प्रस्तुति को बदल सकता है, लेकिन कभी भी कैश, अनुमति, फ़ॉर्म-सबमिशन या रूटिंग शुद्धता को नहीं।
मॉडल उत्तर
मैं नेविगेशन और स्टेट सबमिशन को एनीमेशन से स्वतंत्र रखूँगा। एक SPA startViewTransition(update) का उपयोग करता है और ready के बाद केवल आवश्यक साझा तत्वों को एनिमेट करता है; एक मल्टी-पेज ऐप सेम-ओरिजिन @view-transition का उपयोग करता है। प्रत्येक साझा तत्व को एक स्थिर, अद्वितीय व्यावसायिक नाम मिलता है, और एक विफल एसिंक्रोनस अपडेट सामान्य त्रुटि स्थिति दिखाते हुए ट्रांज़िशन को छोड़ देता है।
असमर्थित ब्राउज़र नेटिव अपडेट या लिंक का उपयोग करते हैं। रिड्यूस्ड-मोशन उपयोगकर्ताओं को कोई एनीमेशन नहीं मिलता है या एक छोटा एनीमेशन मिलता है। लाइफ़साइकिल टाइमआउट skipTransition() को बनाए रखते हैं। फ़ोकस, हेडिंग्स और सिमेंटिक क्रम कभी भी दृश्य प्रभाव पर निर्भर नहीं होते हैं। समर्थन, स्किप्स और इंटरैक्शन विलंबता की निगरानी करें, फिर कैनरी के बाद नामित-तत्व सेट का विस्तार करें।
सामान्य गलतियाँ
- गलती →
view-transition-nameके रूप में ऐरे इंडेक्स का उपयोग करना; यह क्यों विफल होता है → सॉर्टिंग गलत पुराने और नए नोड्स को जोड़ती है; सुधार → एक स्थिर व्यावसायिक ID का उपयोग करें और विशिष्टता लागू करें। - गलती → फ़ॉर्म सबमिट करने से पहले
finishedकी प्रतीक्षा करना; यह क्यों विफल होता है → एक एनीमेशन विफलता व्यावसायिक कार्रवाई को अवरुद्ध करती है; सुधार → पहले स्टेट कमिट करें और केवल प्रस्तुति को एनिमेट करें। - गलती → केवल SPA पथ डिज़ाइन करना; यह क्यों विफल होता है → मल्टी-पेज नेविगेशन में कोई जावास्क्रिप्ट कॉल साइट नहीं होती है; सुधार → सेम-ओरिजिन
@view-transitionका उपयोग करें और सामान्य लिंक सुरक्षित रखें। - गलती → रिड्यूस्ड-मोशन प्राथमिकताओं को अनदेखा करना; यह क्यों विफल होता है → संवेदनशील उपयोगकर्ता चक्कर आना या संज्ञानात्मक भार का अनुभव कर सकते हैं; सुधार → मीडिया क्वेरी में एनीमेशन को छोटा करें या छोड़ें।
फ़ॉलो-अप प्रश्न
विफल अपडेट कॉलबैक को ट्रांज़िशन और स्टेट को कैसे प्रभावित करना चाहिए?
अपडेट कॉलबैक को व्यावसायिक-स्टेट सीमा के रूप में मानें: अपवाद को पकड़ें, रोलबैक करें या कोई त्रुटि रेंडर करें, और ट्रांज़िशन प्रॉमिस को एनीमेशन लाइफ़साइकिल तक सीमित रखें। यदि updateCallbackDone अस्वीकार (reject) करता है, तो skipTransition() को कॉल करें या ब्राउज़र को डिफ़ॉल्ट प्रस्तुति समाप्त करने दें; त्रुटि को दबाएं नहीं।
प्रत्येक तत्व को साझा तत्व के रूप में नाम क्यों न दें?
प्रत्येक नाम को पुराने और नए ट्री के बीच एक स्पष्ट जोड़ी बनानी चाहिए। सब कुछ नाम देने से कैप्चर, लेआउट और कंपोज़िटिंग लागत बढ़ जाती है और आकस्मिक मिलान बन सकते हैं। केवल उन प्रमुख वस्तुओं को नाम दें जिन्हें उपयोगकर्ता समझते हैं; बाकी के लिए रूट फ़ेड या बिना एनीमेशन का उपयोग करें।
आप कैसे साबित करते हैं कि ट्रांज़िशन प्रदर्शन को नुकसान नहीं पहुँचाता है?
ब्राउज़र और डिवाइस द्वारा ready विलंबता, फ़्रेम दर, लंबे कार्य (long tasks), पहली-इनपुट विलंबता और स्किप दर को मापें, फिर यथार्थवादी सूची आकारों का परीक्षण करें। यदि लो-एंड डिवाइस निरंतर फ़्रेम हानि दिखाते हैं, तो नेविगेशन समय को अपरिवर्तित रखते हुए एनीमेशन दायरे को कम करें या इसे स्वचालित रूप से छोड़ दें।