0px से ऑटो तक ऊंचाई संपत्ति का सीएसएस संक्रमण

नमस्कार, हेब्र!

मैं 0px से auto तक की height संपत्ति के सीएसएस संक्रमण बनाने के लिए एक और तरीका साझा करना चाहता हूं।

वेब घटक ट्रीव्यू और डेटाग्रिड विकसित करते समय इस समस्या का सामना करना पड़ा। ट्री व्यू में, मैंने नोड्स का एक सुगम विस्तार / पतन करने का फैसला किया, और एक DataGrid में - अतिरिक्त सामग्री वाली पंक्तियाँ। इंटरनेट को पढ़ने के बाद, मुझे कई कार्यान्वयन विधियां मिलीं, जिनमें से max-height माध्यम से और जावास्क्रिप्ट में हैं। जावास्क्रिप्ट कार्यान्वयन को खारिज कर दिया गया - संक्रमण और एनिमेशन के लिए समर्थन के साथ सीएसएस है। विशेष रूप से ड्रॉप-डाउन मेनू के साथ उदाहरणों में, max-height बनी हुई है, सब कुछ काम करता है।

ट्री व्यू में, प्रत्येक नोड में असीमित घोंसले के शिकार होते हैं, इसलिए आप तुरंत इसकी सामग्री की अधिकतम ऊंचाई निर्धारित नहीं कर सकते, और यहां तक ​​कि अगर आप max-height को बहुत बड़े पर सेट करते हैं, तो संक्रमण एनीमेशन के साथ समस्याएं होंगी। इसके अलावा, यदि आप बच्चे के नोड्स का विस्तार करते हैं, तो माता-पिता की ऊंचाई बढ़ जाएगी और max-height को ओवरलैप कर सकते हैं। यह पसंद है या नहीं, max-height उपयुक्त नहीं है। DataGrid में एक ही समस्या है - एक पंक्ति में कोई भी अतिरिक्त सामग्री हो सकती है। height:auto चाहिए height:auto !

तो, चलो संक्रमण को 0px से auto तक की height संपत्ति पर लागू करना शुरू करते हैं। एक साधारण उदाहरण पर विचार करें।

करते हैं:

• elBlock: HTMLDivElement - elBlock: HTMLDivElement / ध्वस्त होने वाला ब्लॉक;
• elToggle: HTMLButtonElement - स्थिति को टॉगल करने के लिए बटन।

उस ब्लॉक के लिए एक सीएसएस क्लास को परिभाषित करें जिसमें हम सामग्री की ट्रिमिंग और संक्रमण को स्वयं निर्धारित करते हैं:

 .block { overflow: hidden; transition: height 500ms ease; } 

हम elToggle लिए elToggle इवेंट onClick वर्णन करते हैं:

 elToggle.addEventListener("click", () => { if (elBlock.style.height === "0px") { elBlock.style.height = `${ elBlock.scrollHeight }px` } else { elBlock.style.height = `${ elBlock.scrollHeight }px`; window.getComputedStyle(elBlock, null).getPropertyValue("height"); elBlock.style.height = "0"; } }); 

यह वापसी height:auto जोड़ने के लिए बनी हुई है height:auto संक्रमण के बाद height:auto :

 elBlock.addEventListener("transitionend", () => { if (elBlock.style.height !== "0px") { elBlock.style.height = "auto" } }); 

खैर, यह सब, अब ब्लॉक का विस्तार / पतन काम करता है जैसा कि इसे करना चाहिए और सामग्री के आकार पर निर्भर नहीं करता है।


चित्र 1 - ट्री व्यू में नोड्स के विस्तार / टूटने का एक उदाहरण

यह इस दृष्टिकोण के नुकसान को ध्यान देने योग्य है:

• जावास्क्रिप्ट का उपयोग करना, मैं केवल सीएसएस चाहूंगा;
• संक्रमण के दौरान, सामग्री (इसकी ऊंचाई, scrollHeight ) बदल सकती है और इसके पूरा होने के बाद, यदि auto लौटता है, तो ब्लॉक की ऊंचाई एक दिशा या किसी अन्य में नाटकीय रूप से बदल जाएगी। इस प्रभाव से बचने के लिए, आपको scrollHeight में परिवर्तन को ट्रैक करने और height बदलने की आवश्यकता है। जैसा कि अभ्यास से पता चलता है, आमतौर पर संक्रमण का विस्तार / पतन प्रत्येक 0.5 s लेते हैं, और इस समय के दौरान उपयोगकर्ता के अंदर कुछ बदलने का समय नहीं होता है, उदाहरण के लिए, ट्री व्यू के मामले में, बच्चे के नोड का विस्तार करें।

आपका ध्यान के लिए धन्यवाद!