सीएसएस परिवर्तन अन्तरक्रियाशीलता बनाने का एक शानदार तरीका है। बहुत हो गया, transition किसी तत्व की प्रारंभिक स्थिति में, और ब्राउज़र दो स्थितियों के बीच संक्रमण को एनिमेट करता है। जैसे आंतरिक तत्व आकार के लिए संक्रमण auto हालाँकि, यह दशकों से वेब डेवलपर्स के लिए एक समस्या रही है, और एकमात्र विकल्प जावास्क्रिप्ट का उपयोग करके गतिशील रूप से ऊंचाई की गणना करना था।
एक और चुनौती तब बदलाव शुरू करना है जब किसी तत्व को उसकी पहली शैली मिलती है - जैसे कि जब इसे DOM में जोड़ा जाता है या जब display-का मूल्य none परिवर्तन. यह आलेख बताता है कि नई सीएसएस सुविधाओं के साथ इस समस्या को कैसे हल किया जाए calc-size(), interpolate-size, @starting-style तथा transition-behavior प्रबंधित किया जा सकता है.
समाधान के साथ calc-size()
यदि किसी के पास DOM तत्व है जो बंद अवस्था से आता है (height: 0) एक खुली अवस्था में (height: auto) खत्म हो जाता है, एनीमेशन आमतौर पर निष्पादित नहीं होता है, भले ही transitionसंपत्ति निर्धारित है. ऐसा इसलिए है क्योंकि ब्राउज़र आंतरिक आकारों में बदलाव का समर्थन नहीं करते हैं auto सहायता। नया वाला calc-size()हालाँकि, फ़ंक्शन इन आंतरिक मात्राओं पर गणना और इस प्रकार संक्रमण को भी सक्षम बनाता है:
f95f6dcb193aa903adc84ce47bc4a296
Die calc-size()-फ़ंक्शन अभी तक सभी ब्राउज़रों में उपलब्ध नहीं है। मूल को बनाए रखकर फ़ॉलबैक प्राप्त किया जा सकता है height: auto-घोषणा हासिल की जा सकती है.
समाधान के साथ interpolate-size
Die interpolate-sizeप्रॉपर्टी आपको ब्राउज़र के इंटरपोलेशन व्यवहार को सेट करने और यह तय करने की अनुमति देती है कि कीवर्ड के बीच अंतर करना है या नहीं auto प्रक्षेप करना चाहिए. डिफ़ॉल्ट रूप से, इंटरपोलेशन केवल संख्यात्मक मानों के बीच होता है। साथ allow-keywords हालाँकि, आप कीवर्ड के बीच ट्रांज़िशन सक्षम कर सकते हैं:
f95f6dcb193aa903adc84ce47bc4a296
आपके द्वारा interpolate-size: allow-keywords पर :rootतत्व, आप संपूर्ण पृष्ठ के लिए नया व्यवहार सक्रिय करते हैं।
से संक्रमण display:none
एक और समस्या तब उत्पन्न होती है जब का एक तत्व display:none दृश्यमान अवस्था में संक्रमण। वहाँ display एक एनिमेटेबल प्रॉपर्टी नहीं है, कोई एनीमेशन नहीं होता है। नए सीएसएस फ़ंक्शन यहां मदद करते हैं @starting-style तथा transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
साथ में transition-behavior: allow-discrete यह सुनिश्चित करता है कि एनीमेशन पहले चलता है display-का मूल्य block पर none स्विच किया गया है. ये नियम प्रारंभिक शैली अद्यतन के दौरान भी बदलावों को निष्पादित करने की अनुमति देते हैं। @starting-styleनियम यह सुनिश्चित करता है कि प्रारंभिक शैली अद्यतन पर एनीमेशन सही ढंग से चलता है।
ब्राउज़र समर्थन
वर्तमान में नई संपत्तियाँ calc-size() तथा interpolate-size अभी तक सभी ब्राउज़रों द्वारा समर्थित नहीं है. क्रोम में वे एक प्रयोग ध्वज के पीछे उपलब्ध हैं, लेकिन सफारी और फ़ायरफ़ॉक्स में अभी तक नहीं। इसी तरह, के लिए समर्थन transition-behavior Chrome और Edge में मौजूद है, लेकिन Safari और Firefox में नहीं। उम्मीद है कि भविष्य में इसमें बदलाव आएगा।