सीएसएस का उपयोग करके ऊंचाई को 0 से ऑटो में परिवर्तित करना

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

सीएसएस और एचटीएमएल

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

चिकनी ऊंचाई संक्रमण के लिए जावास्क्रिप्ट समाधान

एचटीएमएल, सीएसएस और जावास्क्रिप्ट

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

सीएसएस वेरिएबल्स का उपयोग करके चिकनी ऊंचाई संक्रमण

सीएसएस और एचटीएमएल

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

सीएसएस ट्रांज़िशन और एनिमेशन के बारे में अक्सर पूछे जाने वाले प्रश्न

1. मैं सीएसएस का उपयोग करके ऊंचाई को 0 से ऑटो में कैसे परिवर्तित कर सकता हूं?
2. इसे प्राप्त करने के लिए, आप निश्चित ऊंचाई और के संयोजन का उपयोग कर सकते हैं JavaScript ऊंचाई मान को गतिशील रूप से सेट करने के लिए। शुद्ध सीएसएस समाधान सीमित हैं क्योंकि height: auto सीधे तौर पर एनिमेट करने योग्य नहीं है.
3. CSS में ट्रांज़िशन और एनिमेशन के बीच क्या अंतर है?
4. सीएसएस ट्रांज़िशन एक राज्य से दूसरे राज्य में संपत्ति मूल्यों को आसानी से (एक निश्चित अवधि में) बदलने का एक तरीका प्रदान करते हैं, आमतौर पर होवर जैसे राज्य परिवर्तन पर। सीएसएस एनिमेशन राज्यों और समय को परिभाषित करने के लिए कीफ़्रेम का उपयोग करके अधिक जटिल अनुक्रमों की अनुमति देते हैं।
5. क्या मैं गतिशील ऊँचाई वाले तत्वों के लिए सीएसएस ट्रांज़िशन का उपयोग कर सकता हूँ?
6. हां, लेकिन आपको आम तौर पर पहले से ऊंचाई की गणना करने या सुचारू संक्रमण के लिए ऊंचाई मान को गतिशील रूप से सेट करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होती है।
7. का उद्देश्य क्या है overflow: hidden; सीएसएस संक्रमण में संपत्ति?
8. overflow: hidden; संपत्ति का उपयोग किसी भी सामग्री को छिपाने के लिए किया जाता है जो तत्व की सीमाओं से अधिक है, जो ऊंचाई परिवर्तन से जुड़े स्वच्छ संक्रमण के लिए आवश्यक है।
9. कैसे करें keyframes सीएसएस एनिमेशन में काम करते हैं?
10. Keyframes सीएसएस एनिमेशन आपको एनीमेशन के दौरान विभिन्न बिंदुओं पर एक तत्व की स्थिति को परिभाषित करने की अनुमति देता है। आप जटिल एनिमेशन बनाते हुए प्रत्येक कीफ़्रेम पर गुण और उनके मान निर्दिष्ट कर सकते हैं।
11. क्या मैं सीएसएस ट्रांज़िशन और एनिमेशन को जोड़ सकता हूँ?
12. हां, सीएसएस ट्रांज़िशन और एनिमेशन का संयोजन राज्य परिवर्तन और निरंतर एनिमेशन दोनों को संभालकर एक समृद्ध उपयोगकर्ता अनुभव प्रदान कर सकता है।
13. क्या है scrollHeight जावास्क्रिप्ट में?
14. scrollHeight अतिप्रवाह के कारण स्क्रीन पर दिखाई न देने वाली सामग्री सहित किसी तत्व की कुल ऊंचाई लौटाता है। यह सुचारु संक्रमण के लिए गतिशील ऊंचाइयों की गणना के लिए उपयोगी है।
15. कैसे हुआ animation-delay काम?
16. animation-delay संपत्ति निर्दिष्ट करती है कि एनीमेशन कब शुरू होना चाहिए। यह आपको एक स्तरित प्रभाव के लिए कई एनिमेशन अनुक्रमित करने की अनुमति देता है।
17. क्यों :root सीएसएस में प्रयोग किया जाता है?
18. :root छद्म वर्ग दस्तावेज़ के मूल तत्व को लक्षित करता है। इसका उपयोग आमतौर पर वैश्विक सीएसएस वेरिएबल्स को परिभाषित करने के लिए किया जाता है जिन्हें पूरे स्टाइलशीट में पुन: उपयोग किया जा सकता है।

चिकनी ऊँचाई परिवर्तन पर अंतिम विचार

सीएसएस में ऊंचाई 0 से ऑटो तक सहज संक्रमण प्राप्त करने के लिए तकनीकों के संयोजन की आवश्यकता होती है। जबकि शुद्ध सीएसएस सरलता प्रदान करता है, यह पूर्वनिर्धारित ऊंचाइयों की आवश्यकता से सीमित है। जावास्क्रिप्ट को एकीकृत करके, आप गतिशील रूप से ऊंचाई की गणना और सेट कर सकते हैं, एक निर्बाध संक्रमण प्रदान कर सकते हैं। सीएसएस वेरिएबल्स का उपयोग गतिशील मूल्यों को प्रबंधित करने के लिए एक लचीला दृष्टिकोण भी प्रदान कर सकता है। इन विधियों के संयोजन से डेवलपर्स को आम तौर पर ऊंचाई परिवर्तन से जुड़े अचानक बदलावों के बिना अधिक इंटरैक्टिव और आकर्षक वेब अनुभव बनाने की अनुमति मिलती है।