फ्रंटएंड इंटरव्यू: डिस्क्रीट UI स्टेट्स के लिए transition-behavior का उपयोग कैसे करें?

1. प्रॉम्प्ट और संदर्भ

एक डायलॉग display: none के साथ छिपा हुआ है। प्रोडक्ट टीम चाहती है कि यह फ़ेड इन और आउट हो, और एनिमेशन पूरा होने के बाद ही लेआउट को छोड़े। टीम केवल opacity को ट्रांज़िशन करती है, इसलिए प्रवेश (entry) में कोई दृश्यमान एनिमेशन नहीं होता है और निकास (exit) तुरंत गायब हो जाता है। डिस्क्रीट प्रॉपर्टीज़ की व्याख्या करें, CSS डिज़ाइन करें, और ब्राउज़र फ़ॉलबैक, फ़ोकस मैनेजमेंट और prefers-reduced-motion को कवर करें।

2. इंटरव्यूअर क्या टेस्ट कर रहा है

• क्या आप जानते हैं कि display और content-visibility जैसी डिस्क्रीट प्रॉपर्टीज़ के कोई निरंतर मध्यवर्ती मान (continuous intermediate values) नहीं होते हैं।
• क्या आप transition-behavior: allow-discrete या शॉर्टहैंड का सही उपयोग कर सकते हैं बजाय इसे केवल एक ड्यूरेशन मानने के।
• क्या आप समझते हैं कि प्रवेश और निकास के लिए फ़्लिप टाइमिंग अलग-अलग होती है, और यह कि @starting-style एक प्रारंभिक स्टाइल स्थापित करता है।
• क्या आप कम्पैटिबिलिटी, एक्सेसिबिलिटी, फ़ोकस, रिड्यूस्ड मोशन और वास्तविक रेंडरिंग टेस्ट शामिल करते हैं।

3. उत्तर देने से पहले स्पष्ट करने वाले प्रश्न

1. क्या यह एक सामान्य एलिमेंट है, एक नेटिव डायलॉग है, या एक टॉप-लेयर पॉपओवर है?
2. क्या इसे लेआउट छोड़ना होगा और अनफ़ोकसेबल बनना होगा, या केवल पेंट (paint) छोड़ना पर्याप्त है?
3. कौन से ब्राउज़र वर्ज़न समर्थित हैं, और बिना डिस्क्रीट ट्रांज़िशन के फ़ॉलबैक क्या है?
4. एनिमेशन के दौरान फ़ोकस, Escape, बैकड्रॉप क्लिक और रिड्यूस्ड-मोशन प्राथमिकताओं को कैसे व्यवहार करना चाहिए?

4. 30-सेकंड का उत्तर फ़्रेमवर्क

display डिस्क्रीट है, इसलिए यह डिफ़ॉल्ट रूप से इंटरपोलेट नहीं करता है। इसे ट्रांज़िशन में शामिल करने के लिए transition-behavior: allow-discrete का उपयोग करें और opacity या transform के लिए गैर-शून्य (non-zero) ड्यूरेशन भी प्रदान करें। प्रवेश पर, पूरे एनिमेशन के लिए पर्याप्त समय रहते एक दृश्यमान मान पर स्विच करें; निकास पर, एलिमेंट को अंत तक दृश्यमान रखें। पहले इंसर्ट किए गए फ़्रेम के लिए @starting-style का उपयोग करें। पुराने ब्राउज़र निरंतर फ़ॉलबैक को बनाए रखते हुए एन्हांसमेंट को अनदेखा कर सकते हैं; फ़ोकस, हिडन सेमेंटिक्स और रिड्यूस्ड मोशन को अभी भी स्पष्ट हैंडलिंग की आवश्यकता होती है।

5. चरण-दर-चरण विस्तृत उत्तर

चरण 1: निरंतर और डिस्क्रीट प्रॉपर्टीज़ को अलग करें

opacity और transform निरंतर मध्यवर्ती मान उत्पन्न कर सकते हैं; display केवल मानों को स्विच करता है। allow-discrete के बिना, ब्राउज़र display को तुरंत बदल देता है, इसलिए एक बंद होने वाला एलिमेंट उसके ओपेसिटी ट्रांज़िशन दिखने से पहले ही हटा दिया जाता है और एक खुलने वाले एलिमेंट के पास कोई दृश्यमान स्टार्ट फ़्रेम नहीं होता है। transition-behavior केवल डिस्क्रीट ट्रांज़िशन की अनुमति देता है; transition-property और एक गैर-शून्य transition-duration अभी भी आवश्यक हैं।

चरण 2: एक द्विदिशी (bidirectional) पैनल ट्रांज़िशन बनाएं

पहले कंटीन्यूअस फ़ॉलबैक डिक्लेयर करें, फिर allow-discrete के साथ एक एन्हांस्ड डिक्लेरेशन दें। निकास के दौरान, display को 100% के करीब फ़्लिप होना चाहिए ताकि कंटेंट दृश्यमान बना रहे; प्रवेश के दौरान इसे शुरुआत में ही एक दृश्यमान मान पर फ़्लिप होना चाहिए। केवल transition-behavior डिक्लेयर करके टारगेट ओपेसिटी या ट्रांसफ़ॉर्म स्टेट को न भूलें।

.panel {
  opacity: 0;
  transform: translateY(-0.5rem);
  display: none;
  transition: opacity 180ms ease, transform 180ms ease;
  transition: opacity 180ms ease, transform 180ms ease, display 180ms allow-discrete;
}

.panel[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

चरण 3: प्रथम प्रवेश और पॉपओवर को संभालें

जब कोई एलिमेंट डायनेमिक रूप से इंसर्ट किया जाता है या कोई पॉपओवर पहली बार खुलता है, तो तुलना करने के लिए कोई पिछला दृश्यमान स्टाइल नहीं हो सकता है। @starting-style प्रारंभिक ओपेसिटी और ट्रांसफ़ॉर्म प्रदान करता है। एक नेटिव पॉपओवर टॉप लेयर में भी प्रवेश करता है, इसलिए display और overlay को डिस्क्रीट ट्रांज़िशन में शामिल करने की आवश्यकता होती है अन्यथा निकास एलिमेंट तुरंत हटा दिया जाता है। टारगेट ब्राउज़र वर्ज़न पर इस संयोजन का परीक्षण करें।

चरण 4: फ़ॉलबैक और फ़ीचर डिटेक्शन डिज़ाइन करें

पुराने ब्राउज़र अज्ञात allow-discrete मान को अनदेखा करते हैं लेकिन फिर भी उन्हें बेस ओपेसिटी/ट्रांसफ़ॉर्म ट्रांज़िशन को बनाए रखना चाहिए। यदि आवश्यक हो, तो पूरे बेस स्टाइल को छिपाने के बजाय एन्हांसमेंट नियमों को @supports (transition-behavior: allow-discrete) के पीछे रखें। फ़ॉलबैक को अभी भी खुलना, बंद होना, फ़ोकस होना और सही हिडन सेमेंटिक्स को प्रदर्शित करना चाहिए।

चरण 5: एक्सेसिबिलिटी, परफॉर्मेंस और वेरिफिकेशन

एनिमेशन कोई एक्सेसिबिलिटी स्टेट नहीं है। बंद होने पर, hidden, aria-hidden, या नेटिव डायलॉग स्टेट को सिंक्रोनाइज़ करें और ट्रिगर पर फ़ोकस वापस लाएं; खुलने पर, फ़ोकस को अंदर ले जाएं और Escape को सपोर्ट करें। prefers-reduced-motion: reduce के तहत ड्यूरेशन को कम करें या हटा दें। लेआउट, पेंट, कीबोर्ड फ़ोकस, स्क्रीन रीडर, रैपिड टॉगल, बाधित ट्रांज़िशन, और लो-एंड डिवाइस पर लेआउट/कंपोज़िटिंग लागत का परीक्षण करें।

6. एक उच्च-गुणवत्ता वाले उत्तर का उदाहरण

display डिस्क्रीट है और इसमें ओपेसिटी जैसा कोई निरंतर मध्यवर्ती मान नहीं होता है। मैं एक बेस ओपेसिटी/ट्रांसफ़ॉर्म ट्रांज़िशन रखूँगा, फिर transition-behavior: allow-discrete के साथ display को एन्हांस्ड पाथ में शामिल करूँगा; प्रवेश शुरुआत में ही दृश्यमान में फ़्लिप हो जाता है, जबकि निकास अंत तक दृश्यमान रहता है। @starting-style पहला फ़्रेम प्रदान करता है, और पॉपओवर को टॉप-लेयर display और overlay हैंडलिंग की भी आवश्यकता होती है। पुराने ब्राउज़र एन्हांसमेंट को अनदेखा करते हैं लेकिन बेस एनिमेशन को बनाए रखते हैं। मैं फ़ोकस, Escape, हिडन सेमेंटिक्स और रिड्यूस्ड मोशन को भी सिंक्रोनाइज़ करूँगा, फिर ब्राउज़रों और कीबोर्ड फ़्लो में इस व्यवहार को वेरीफाई करूँगा।

7. सामान्य गलतियाँ

• केवल ओपेसिटी को ट्रांज़िशन करना → display तुरंत बदल जाता है → एक कंटीन्यूअस प्रॉपर्टी को बनाए रखते हुए allow-discrete जोड़ें।
• transition-behavior को ड्यूरेशन मानना → डिस्क्रीट प्रॉपर्टी अभी भी ट्रांज़िशन नहीं करती है → प्रॉपर्टी और एक गैर-शून्य ड्यूरेशन भी डिक्लेयर करें।
• निकास की शुरुआत में display को none पर फ़्लिप करना → फ़ेड दिखाई नहीं दे सकता → डिस्क्रीट फ़्लिप को निकास ड्यूरेशन के अंत के साथ संरेखित करें।
• पहले इंसर्शन को अनदेखा करना → पहले ओपन में कोई प्रवेश एनिमेशन नहीं होता है → @starting-style के साथ एक प्रारंभिक फ़्रेम परिभाषित करें।
• केवल माउस और आधुनिक ब्राउज़रों का परीक्षण करना → कीबोर्ड, स्क्रीन-रीडर, या फ़ॉलबैक स्टेट्स विफल हो जाती हैं → supports फ़ॉलबैक, फ़ोकस और रिड्यूस्ड-मोशन जाँच शामिल करें।

8. फॉलो-अप और उत्तर

display को निकास के अंत में क्यों स्विच होना चाहिए?

यदि यह तुरंत none पर स्विच हो जाता है, तो एलिमेंट लेआउट और रेंडरिंग छोड़ देता है, इसलिए ओपेसिटी ड्यूरेशन के शेष भाग के लिए कोई दृश्यमान कंटेंट नहीं बचता है। इसे 100% के करीब दृश्यमान रखें, फिर हिडन स्टेट में प्रवेश करें।

क्या allow-discrete हर फ़्रेम में display को इंटरपोलेट करता है?

नहीं। यह एक डिस्क्रीट मान को ट्रांज़िशन में भाग लेने की अनुमति देता है, लेकिन मान अभी भी एक परिभाषित बिंदु पर ही फ़्लिप होता है। निरंतर दृश्य परिवर्तन ओपेसिटी, ट्रांसफ़ॉर्म या किसी अन्य इंटरपोलेबल प्रॉपर्टी से आता है।

आप पुराने ब्राउज़रों को उपयोग योग्य कैसे बनाए रखते हैं?

पहले allow-discrete के बिना बेस ट्रांज़िशन डिक्लेयर करें, फिर @supports या बाद के डिक्लेरेशन के साथ एन्हांस करें। यदि एन्हांसमेंट उपलब्ध नहीं है, तो बटन व्यवहार, फ़ोकस और हिडन सेमेंटिक्स को बनाए रखते हुए तात्कालिक display स्विच को स्वीकार करें।

आप रिड्यूस्ड मोशन को कैसे संभालते हैं?

prefers-reduced-motion: reduce के तहत, स्टेट सिंक्रोनाइज़ेशन, फ़ोकस मूवमेंट और क्लोज़ कंट्रोल्स को बनाए रखते हुए ड्यूरेशन को काफी कम कर दें या इसे शून्य पर सेट करें। केवल एनिमेशन को छिपाकर एक अदृश्य फ़ोकसेबल एलिमेंट न छोड़ें।