CSS3 संक्रमण विस्तार/पतन जोड़ें

Question

मैं विस्तार/पतन संक्रमण कैसे जोड़ूं?

http://jsfiddle.net/Bq6eK/1

Answer 1

यह मेरा समाधान है कि स्वचालित रूप से ऊंचाई को समायोजित कर देता है Can you use CSS3 to transition from height:0 to the variable height of content?

Answer 2

इस, काम करना चाहिए थोड़ी देर भी प्रयास करने के लिए था ..: डी

css3 animation jsfiddle

Answer 3

http://jsfiddle.net/Bq6eK/215/

मैं इस समाधान के लिए अपने कोड को संशोधित नहीं किया था, मैंने लिखा मेरी इसके बजाए मेरा समाधान वह नहीं है जो आपने पूछा था, लेकिन शायद आप मौजूदा ज्ञान के साथ इसे बना सकते हैं। मैंने कोड को भी टिप्पणी की ताकि आप जान सकें कि मैं वास्तव में परिवर्तनों के साथ क्या कर रहा हूं।

"जावास्क्रिप्ट में ऊंचाई सेट करने से बचने" के समाधान के रूप में, मैंने अभी तक 'maxHeight' को जेएस फ़ंक्शन में एक पैरामीटर बनाया है जिसे टॉगलहेइट कहा जाता है। अब इसे विस्तारित वर्ग के प्रत्येक div के लिए HTML में सेट किया जा सकता है।

मैं इसे आगे कहूंगा, मैं फ्रंट-एंड भाषाओं के साथ सुपर अनुभवी नहीं हूं, और एक समस्या है जहां मुझे एनीमेशन शुरू होने से पहले दो बार 'शो/छुपाएं' बटन पर क्लिक करना होगा। मुझे संदेह है कि यह फोकस के साथ एक मुद्दा है।

मेरे समाधान के साथ अन्य समस्या यह है कि आप वास्तव में यह पता लगा सकते हैं कि छुपा पाठ केवल div में क्लिक करके शो/छुपाएं बटन दबाए बिना क्या है, आप उस पाठ को हाइलाइट कर सकते हैं जो दिखाई नहीं दे रहा है और इसे पेस्ट कर सकता है एक दृश्य स्थान पर।

मैंने जो किया है उसके शीर्ष पर अगले चरण के लिए मेरा सुझाव यह है कि शो/छुपाएं बटन गतिशील रूप से बदल जाए। मुझे लगता है कि आप यह पता लगा सकते हैं कि जेएस के साथ टेक्स्ट दिखाने और छिपाने के बारे में आपको पहले से क्या पता चल रहा है।

Answer 4

यहां एक समाधान है जो जेएस का उपयोग नहीं करता है। यह इसके बजाय checkboxes का उपयोग करता है।

आप अपने सीएसएस को यह जोड़कर चेकबॉक्स छिपा सकते हैं:

.container input{ 
    display: none; 
} 

और फिर यह एक button की तरह लग रहे बनाने के लिए कुछ स्टाइल जोड़ें। http://jsfiddle.net/9ccjE/

मैं वैकल्पिक हल कि पोस्ट r3bel प्रयोग किया है::

Here's the source code that I modded.

Answer 5

OMG, मैं घंटों के लिए इस के लिए एक सरल समाधान खोजने के लिए करने की कोशिश की । मुझे पता था कि कोड सरल था लेकिन कोई भी मुझे जो भी चाहता था उसे प्रदान नहीं करता था। तो अंततः कुछ उदाहरण कोड पर काम करना पड़ा और कुछ आसान बना दिया कि कोई भी JQuery आवश्यक नहीं उपयोग कर सकता है। सरल जावास्क्रिप्ट और सीएसएस और एचटीएमएल। एनीमेशन काम करने के लिए आपको ऊंचाई और चौड़ाई निर्धारित करना होगा या एनीमेशन काम नहीं करेगा। मुश्किल तरीके से पता चला।

<script> 
     function dostuff() { 
      if (document.getElementById('MyBox').style.height == "0px") { 

       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
      } 
      else { 
       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
      } 
     } 
    </script> 
    <div id="MyBox" style="height: 0px; width: 0px;"> 
    </div> 

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">