मैं ऊँचाई कैसे बदल सकता हूँ: 0; ऊंचाई तक: ऑटो; CSS का उपयोग कर रहे हैं?




css3 css-transitions (20)

मैं सीएसएस बदलाव का उपयोग करके <ul> स्लाइड डाउन करने का प्रयास कर रहा हूं।

<ul> height: 0; पर शुरू होता है height: 0; । होवर पर, ऊंचाई को ऊंचाई पर सेट किया जाता है height:auto; । हालांकि, यह केवल दिखाई देने के लिए पैदा कर रहा है, संक्रमण नहीं ,

अगर मैं इसे height: 40px; से करता हूं height: 40px; height: auto; , तो यह height: 0; तक स्लाइड करेगा height: 0; , और फिर अचानक सही ऊंचाई पर कूदें।

जावास्क्रिप्ट का उपयोग किए बिना मैं इसे और कैसे कर सकता हूं?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}
The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>


CSS3 संक्रमणों का उपयोग करके ऊंचाई को एनिमेट करने का एक दृश्य समाधान इसके बजाय पैडिंग को चेतन करना है।

आपको पूर्ण रूप से पोंछने का प्रभाव नहीं मिलता है, लेकिन संक्रमण-अवधि और पैडिंग मूल्यों के साथ खेलना आपको काफी करीब आ जाना चाहिए। यदि आप ऊँचाई / अधिकतम ऊँचाई स्पष्ट रूप से निर्धारित नहीं करना चाहते हैं, तो यही होना चाहिए।

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/ (स्टीफ़बैंड के ऊपर jsFiddle से रिफ़्ड)


आप गैर-शब्दार्थ गुड़-पोकरी के साथ थोड़ा सा कर सकते हैं। मेरा सामान्य दृष्टिकोण बाहरी DIV की ऊँचाई को चेतन करना है, जिसमें एक एकल बच्चा है जो एक स्टाइल-कम DIV है जिसका उपयोग केवल सामग्री की ऊँचाई को मापने के लिए किया जाता है।

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

एक .measuringWrapper साथ बस को .measuringWrapper सक्षम होना .measuringWrapper और बस DIV की ऊंचाई को ऑटो पर सेट करना है और उस चेतन को है, लेकिन वह काम नहीं करता है (ऊंचाई सेट हो जाती है, लेकिन कोई एनीमेशन नहीं होता है)।

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

मेरी व्याख्या यह है कि एनीमेशन को चलाने के लिए एक स्पष्ट ऊंचाई की आवश्यकता है। आप ऊंचाई पर एक एनीमेशन नहीं प्राप्त कर सकते हैं जब या तो ऊंचाई (शुरुआत या अंत ऊंचाई) auto


आपको इसके बजाय पैमाने का उपयोग करना चाहिए।

HTML:

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

सीएसएस:

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

मैंने jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/ पर उपरोक्त कोड का एक वेंडर उपसर्ग संस्करण बनाया है और ऊंचाई, http://jsfiddle.net/dotnetCarpenter/7cnfc/206/ बजाय स्केल का उपयोग करने के लिए अपने jsfiddle को बदल दिया है। http://jsfiddle.net/dotnetCarpenter/7cnfc/206/


परिवर्तन में max-height उपयोग करें और height नहीं। और max-height पर एक मूल्य सेट करें जो आपके बॉक्स से बड़ा होगा।

यहाँ एक अन्य answer में क्रिस जॉर्डन द्वारा प्रदान की गई JSFiddle डेमो देखें।

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>


मेरा वर्कअराउंड एक अच्छी चिकनी एनीमेशन के लिए सटीक सामग्री की ऊँचाई को अधिकतम-ऊँचाई में परिवर्तित करना है, फिर एक संक्रमण कॉलबैक का उपयोग करके अधिकतम-ऊँचाई 9999px पर सेट करें ताकि सामग्री स्वतंत्र रूप से आकार बदल सके।

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});
.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button>


मेरे द्वारा हमेशा उपयोग किया जाने वाला समाधान पहले फीका करना था, फिर font-size , padding और margin मानों को छोटा करना। यह पोंछे के समान नहीं दिखता है, लेकिन यह स्थिर height या max-height height बिना काम करता है।

कार्य उदाहरण:

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}
<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<p>Another paragraph...</p>


मुझे लगता है कि मैं वास्तव में ठोस समाधान के साथ आया हूं

ठीक!मुझे पता है कि यह समस्या इंटरनेट की तरह पुरानी है, लेकिन मुझे लगता है कि मेरे पास एक समाधान है जिसे मैं म्यूटेंट-संक्रमण नामक एक प्लगइन में बदल दिया । style=""जब भी DOM में कोई परिवर्तन होता है, तो मेरा समाधान ट्रैक किए गए तत्वों की विशेषताओं को निर्धारित करता है । अंतिम परिणाम यह है कि आप अपने संक्रमणों के लिए अच्छे ole CSS का उपयोग कर सकते हैं और हैकी फ़िक्स या विशेष जावास्क्रिप्ट का उपयोग नहीं कर सकते हैं। केवल एक चीज जो आपको करनी है, वह सेट है जिसे आप उपयोग कर रहे प्रश्न में तत्व पर ट्रैक करना चाहते हैं data-mutant-attributes="X"

<div data-mutant-attributes="height">                                                                      
        This is an example with mutant-transition                                                                                                          
    </div>

बस! यह समाधान DOM में परिवर्तनों का पालन करने के लिए MutationObserver का उपयोग करता है । इस वजह से, आपको वास्तव में कुछ भी सेट करने या जावास्क्रिप्ट का उपयोग मैन्युअल रूप से चेतन चीजों के लिए नहीं करना है। परिवर्तन स्वचालित रूप से ट्रैक किए जाते हैं। हालाँकि, क्योंकि यह MutationObserver का उपयोग करता है, यह केवल IE11 + में संक्रमण करेगा।

Fiddles!


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

तो ली: होवर तब होता है जब माउस राज्य में प्रवेश करता है और फिर गैर-होवर की संपत्ति पर संक्रमण माउस छोड़ देगा।

उम्मीद है कि इससे कुछ मदद मिलेगी।

उदाहरण के लिए:

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

यहाँ एक पहेली है: http://jsfiddle.net/BukwJ/


आप ऊँचाई से संक्रमण कर सकते हैं: 0 से ऊँचाई: ऑटो प्रदान करना जो आपको न्यूनतम ऊंचाई और अधिकतम ऊँचाई प्रदान करता है।

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

ऊंचाई को ऑटो पर सेट करें और अधिकतम-ऊंचाई को परिवर्तित करें।

Chrome v17 पर परीक्षण किया गया

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

मुझे लगता है कि यह धागा पुराना हो रहा है, लेकिन यह कुछ Google खोजों पर उच्च स्थान पर है इसलिए मुझे लगता है कि यह अपडेट करने लायक है।

आप भी तत्व की अपनी ऊँचाई प्राप्त / निर्धारित करते हैं:

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

इनलाइन स्क्रिप्ट टैग में target_box के समापन टैग के तुरंत बाद आपको इस जावास्क्रिप्ट को डंप करना चाहिए।


मैंने सब कुछ विस्तार से नहीं पढ़ा है लेकिन मुझे हाल ही में यह समस्या हुई है और मैंने वही किया है जो इस प्रकार है:

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}

यह आपको एक ऐसा डीवा देता है जो पहले 200px ऊंचाई तक की सामग्री दिखाता है और होवर पर इसका आकार कम से कम div की पूरी सामग्री जितना अधिक हो जाता है। Div 3000px नहीं बनता है, लेकिन 3000px वह सीमा है जो मैं लगा रहा हूं। गैर पर संक्रमण सुनिश्चित करें: होवर, अन्यथा आपको कुछ अजीब प्रतिपादन मिल सकता है। इस तरह: हॉवर को गैर से प्राप्त होता है: होवर।

संक्रमण% या ऑटो पर px के रूप में काम नहीं करता है। आपको माप की एक ही इकाई का उपयोग करने की आवश्यकता है। यह मेरे लिए ठीक काम करता है। HTML5 का उपयोग करना इसे पूर्ण बनाता है ...।

याद रखें कि आस-पास हमेशा एक काम होता है ...; )

आशा है कि किसी को यह उपयोगी लगता है


Element.scrollHeightसंपत्ति का बहुत कम उल्लेख था जो यहां उपयोगी हो सकता है और अभी भी शुद्ध सीएसएस संक्रमण के साथ उपयोग किया जा सकता है। संपत्ति में हमेशा एक तत्व की "पूर्ण" ऊंचाई शामिल होती है, भले ही उसकी सामग्री ढह गई ऊंचाई (जैसे height: 0) के परिणामस्वरूप कैसे और कैसे समाप्त हो जाए ।

इस तरह, एक height: 0(प्रभावी रूप से पूरी तरह से ध्वस्त) तत्व के लिए, इसका "सामान्य" या "पूर्ण" ऊंचाई अभी भी आसानी से इसके scrollHeightमूल्य ( आमतौर पर पिक्सेल लंबाई) के माध्यम से उपलब्ध है ।

इस तरह के एक तत्व के लिए, यह मानते हुए कि पहले से ही संक्रमण की स्थापना की गई है जैसे ( ulमूल प्रश्न के अनुसार):

ul {
    height: 0;
    transition: height 1s; /* An example transition. */
}

हम सीएसएस का उपयोग करते हुए वांछित एनिमेटेड "विस्तार" को ट्रिगर कर सकते हैं, केवल निम्न के साथ कुछ इस तरह से (यहां माना जाता है कि ulचर सूची का संदर्भ देता है):

ul.style.height = ul.scrollHeight + "px";

बस। यदि आपको सूची को गिराने की आवश्यकता है, तो दोनों में से कोई एक निम्नलिखित कथन करेगा:

ul.style.height = "0";
ul.style.removeProperty("height");

मेरे विशेष उपयोग का मामला अज्ञात और अक्सर काफी लंबाई की एनिमेटिंग सूचियों के इर्द-गिर्द घूमता है, इसलिए मैं मनमाने ढंग से "बड़े पर्याप्त" heightया max-heightविनिर्देशन को निपटाने में सहज नहीं था और कट-ऑफ सामग्री या सामग्री को जोखिम में डालना जिसे आपको अचानक स्क्रॉल करने की आवश्यकता है (यदि overflow: auto, उदाहरण के लिए) । इसके अतिरिक्त, सहजता और समय- max-heightआधारित समाधानों के साथ टूट गया है , क्योंकि उपयोग की गई ऊंचाई अपने अधिकतम मूल्य तक पहुंच सकती है जितनी जल्दी यह max-heightपहुंचने के लिए ले जाएगा 9999px। और जैसे-जैसे स्क्रीन रिज़ॉल्यूशन बढ़ते हैं, पिक्सेल लंबाई 9999pxमेरे मुंह में खराब स्वाद छोड़ती है। यह विशेष समाधान मेरी राय में, एक सुरुचिपूर्ण तरीके से समस्या को हल करता है।

अंत में, यहाँ उम्मीद है कि सीएसएस पता लेखकों के भविष्य के संशोधनों को इस तरह की चीजों को और भी अधिक सुरुचिपूर्ण ढंग से करने की आवश्यकता है - "गणना की गई" बनाम "उपयोग किए गए" और "हल किए गए" मूल्यों की धारणा को फिर से देखें, और विचार करें कि क्या गणना कंप्यूट पर लागू होनी चाहिए मूल्यों के साथ संक्रमण, widthऔर height(जो वर्तमान में एक विशेष उपचार का एक सा मिलता है)।


max-heightप्रत्येक राज्य के लिए अलग-अलग संक्रमण सहजता और देरी के साथ उपयोग करें ।

HTML:

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

सीएसएस:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

उदाहरण देखें: http://jsfiddle.net/0hnjehjc/1/


जैसा कि मैंने पोस्ट किया है कि पहले से ही 30 से अधिक उत्तर हैं, लेकिन मुझे लगता है कि जेक द्वारा पहले से ही स्वीकार किए गए उत्तर पर मेरे उत्तर में सुधार होता है ।

मैं उस मुद्दे से संतुष्ट नहीं था जो केवल max-heightऔर CSS3 के बदलाव का उपयोग करता है , क्योंकि कई टिप्पणीकारों ने उल्लेख किया है, आपको अपना max-heightमूल्य वास्तविक ऊंचाई के बहुत करीब सेट करना होगा या आपको देरी होगी। उस समस्या के उदाहरण के लिए यह JSFiddle देखें ।

इसको प्राप्त करने के लिए (जबकि अभी भी कोई जावास्क्रिप्ट का उपयोग करते हुए), मैंने एक और HTML तत्व जोड़ा है जो transform: translateYCSS मान को परिवर्तित करता है ।

यह दोनों का मतलब है max-heightऔर translateYउपयोग किया जाता है: max-heightतत्व नीचे यह नीचे तत्वों पुश करने के लिए अनुमति देता है, जबकि translateY"तत्काल" प्रभाव हम चाहते हैं देता है। मुद्दा max-heightअभी भी मौजूद है, लेकिन इसका प्रभाव कम है। इसका मतलब है कि आप अपने max-heightमूल्य के लिए बहुत बड़ी ऊंचाई निर्धारित कर सकते हैं और इसके बारे में कम चिंता कर सकते हैं।

समग्र लाभ यह है कि संक्रमण (वापस) में संक्रमण पर, उपयोगकर्ता translateYएनीमेशन को तुरंत देखता है , इसलिए यह वास्तव में कोई फर्क नहीं पड़ता कि कितना समय max-heightलगता है।

फिडल के रूप में समाधान

body {
  font-family: sans-serif;
}

.toggle {
  position: relative;
  border: 2px solid #333;
  border-radius: 3px;
  margin: 5px;
  width: 200px;
}

.toggle-header {
  margin: 0;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  cursor: pointer;
}

.toggle-height {
  background-color: tomato;
  overflow: hidden;
  transition: max-height .6s ease;
  max-height: 0;
}

.toggle:hover .toggle-height {
  max-height: 1000px;
}

.toggle-transform {
  padding: 5px;
  color: white;
  transition: transform .4s ease;
  transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
  transform: translateY(0);
}
<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>


ठीक है, तो मुझे लगता है कि मैं एक सुपर सरल उत्तर के साथ आया था ... नहीं max-height, relativeस्थिति का उपयोग करता है , liतत्वों पर काम करता है, और शुद्ध सीएसएस है। मैंने कुछ भी परीक्षण नहीं किया है, लेकिन फ़ायरफ़ॉक्स, हालांकि सीएसएस द्वारा निर्णय लेते हुए, इसे सभी ब्राउज़रों पर काम करना चाहिए।

FIDDLE: http://jsfiddle.net/n5XfG/2596/

सीएसएस

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

एचटीएमएल

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

मैंने हाल ही में रैपिंग के बजाय तत्वों max-heightपर संक्रमण किया है ।liul

तर्क यह है कि max-heightsबड़े की तुलना में छोटे के लिए देरी बहुत कम ध्यान देने योग्य है (यदि बिल्कुल भी) max-heights, और मैं उपयोग करके या कुछ मनमानी विशाल संख्या के बजाय मेरे max-heightमूल्य के सापेक्ष सेट कर सकता हूं ।font-sizeliemsrems

यदि मेरा फ़ॉन्ट आकार है 1rem, तो मैं अपने max-heightको कुछ इस तरह सेट करूँगा 3rem(लिपटा हुआ पाठ समायोजित करने के लिए)। आप यहां एक उदाहरण देख सकते हैं:

http://codepen.io/mindfullsilence/pen/DtzjE


यह वास्तव में समस्या का "समाधान" नहीं है, बल्कि अधिक समाधान है। यह केवल पाठ के साथ लिखे गए अनुसार काम करता है, लेकिन आवश्यकतानुसार अन्य तत्वों के साथ काम करने के लिए बदला जा सकता है।

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

यहाँ एक उदाहरण है: http://codepen.io/overthemike/pen/wzjRKa

अनिवार्य रूप से, आप फ़ॉन्ट-आकार को 0 पर सेट करते हैं और संक्रमण करते हैं कि ऊँचाई, या अधिकतम-ऊँचाई, या पैमाने () आदि के बजाय त्वरित रूप से पर्याप्त गति से आप क्या चाहते हैं को बदलने के लिए। वर्तमान में CSS के साथ वास्तविक ऊंचाई को ऑटो में बदलना संभव नहीं है, लेकिन भीतर सामग्री को बदलना, इसलिए फ़ॉन्ट-आकार संक्रमण है।

  • नोट - वहाँ कोड जावास्क्रिप्ट में आईएस जावास्क्रिप्ट है, लेकिन यह केवल उद्देश्य के लिए क्लिक पर सीएसएस वर्गों को जोड़ने / हटाने के लिए है। यह छिपे हुए रेडियो बटन के साथ किया जा सकता है, लेकिन मैं उस पर ध्यान केंद्रित नहीं कर रहा था, बस ऊंचाई में परिवर्तन।

यहां किसी भी शुरुआती ऊंचाई से संक्रमण करने का एक तरीका है, जिसमें प्रति-नोड के आधार पर हार्ड-सेट कोड की आवश्यकता के बिना 0, ऑटो (पूर्ण आकार और लचीले) सहित, आरंभ करने के लिए कोई भी उपयोगकर्ता-कोड: https://github.com/csuwildcat/transition-auto । यह मूल रूप से आप क्या चाहते हैं के लिए पवित्र कब्र है, मैं मानता हूं -> http://codepen.io/csuwldcat/pen/kwsdF । बस अपने पृष्ठ में निम्नलिखित जेएस फाइल को थप्पड़ मारें, और उसके बाद आपको केवल एक बूलियन विशेषता को जोड़ना / हटाना है - reveal=""नोड्स से जिसे आप विस्तार और अनुबंध करना चाहते हैं।

यहां आपको उपयोगकर्ता के रूप में सभी करने की ज़रूरत है, एक बार उदाहरण कोड के नीचे पाए गए कोड ब्लॉक को शामिल करें:

/*** Nothing out of the ordinary in your styles ***/
<style>
    div {
        height: 0;
        overflow: hidden;
        transition: height 1s;
    }
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

<div>
    I have tons of content and I am 0px in height you can't see me...
</div>

<div reveal>
     I have tons of content and I am 0px in height you can't see me...
     but now that you added the 'reveal' attribute, 
     I magically transitioned to full height!...
</div>

यहां आपके पृष्ठ में शामिल करने के लिए कोड ब्लॉक है, उसके बाद, यह सब ग्रेवी है:

अपने पृष्ठ में इस जेएस फ़ाइल को छोड़ दें - यह सभी बस काम करता है ™

/ * ऊंचाई के लिए कोड: ऑटो; संक्रमण * /

(function(doc){

/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
    test.innerHTML = '-';
    test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);

var loading = true,
    numReg = /^([0-9]*\.?[0-9]*)(.*)/,
    skipFrame = function(fn){
      requestAnimationFrame(function(){
        requestAnimationFrame(fn);
      });
    },
    /* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
    revealFrame = function(el, state, height){
        el.setAttribute('reveal-transition', 'frame');
        el.style.height = height;
        skipFrame(function(){
            el.setAttribute('reveal-transition', state);
            el.style.height = '';
        });
    },
    transitionend = function(e){
      var node = e.target;
      if (node.hasAttribute('reveal')) {
        if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
      } 
      else {
        node.removeAttribute('reveal-transition');
        node.style.height = '';
      }
    },
    animationstart = function(e){
      var node = e.target,
          name = e.animationName;   
      if (name == 'reveal' || name == 'unreveal') {

        if (loading) return revealFrame(node, 'complete', 'auto');

        var style = getComputedStyle(node),
            offset = (Number(style.paddingTop.match(numReg)[1])) +
                     (Number(style.paddingBottom.match(numReg)[1])) +
                     (Number(style.borderTopWidth.match(numReg)[1])) +
                     (Number(style.borderBottomWidth.match(numReg)[1]));

        if (name == 'reveal'){
          node.setAttribute('reveal-transition', 'running');
          node.style.height = node.scrollHeight - (offset / scroll) + 'px';
        }
        else {
            if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
            else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
        }
      }
    };

doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);

/*
    Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
    If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
    skipFrame(function(){
        loading = false;
    });
}
else document.addEventListener('DOMContentLoaded', function(e){
    skipFrame(function(){
        loading = false;
    });
}, false);

/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
    t = 'transition: none; ',
    au = 'animation: reveal 0.001s; ',
    ar = 'animation: unreveal 0.001s; ',
    clip = ' { from { opacity: 0; } to { opacity: 1; } }',
    r = 'keyframes reveal' + clip,
    u = 'keyframes unreveal' + clip;

styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
    '[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
    '[reveal-transition="complete"] { height: auto; }' +
    '[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
    '@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
    '@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;

doc.querySelector('head').appendChild(styles);

})(document);

/ * DEMO के लिए कोड * /

    document.addEventListener('click', function(e){
      if (e.target.nodeName == 'BUTTON') {
        var next = e.target.nextElementSibling;
        next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
      }
    }, false);

संपादित करें: अद्यतन किए गए उत्तर के लिए नीचे स्क्रॉल करें
मैं एक ड्रॉप डाउन सूची बना रहा था और इस पोस्ट को देखा ... कई अलग-अलग उत्तर लेकिन मैंने अपनी ड्रॉप डाउन सूची को भी साझा करने का निर्णय लिया, ... यह सही नहीं है लेकिन कम से कम यह केवल सीएसएस के लिए उपयोग करेगा ड्रॉप डाउन! मैं परिवर्तन का उपयोग कर रहा हूं: सूची को देखने के लिए बदलने के लिए TranslY (y) ...
आप परीक्षण में अधिक देख सकते हैं
http://jsfiddle.net/BVEpc/4/
मैंने हर ली के पीछे div रखा है क्योंकि मेरी ड्रॉप डाउन सूची ऊपर से आ रही है और उन्हें ठीक से दिखाने के लिए यह आवश्यक था, मेरा div कोड है:

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

और हॉवर है:

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

और क्योंकि उल ऊंचाई यह आपके शरीर की सामग्री पर प्राप्त कर सकते हैं सामग्री के लिए सेट है यही कारण है कि मैं उल के लिए यह किया है:

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

और मंडराना:

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

दूसरी बार संक्रमण के बाद देरी हो रही है और यह मेरी ड्राप डाउन सूची के अनजाने में बंद हो जाने के
बाद छिप जाएगा ... आशा है कि बाद में किसी को इस का लाभ मिलेगा।

संपादित करें: मैं बस विश्वास नहीं कर सकता कि वास्तव में इस प्रोटोटाइप का उपयोग कर पीपीएल! यह ड्रॉप डाउन मेनू केवल एक उप मेनू के लिए है और यह सब है !! मैंने एक बेहतर अपडेट किया है जिसमें IE 8 समर्थन के साथ ltr और rtl दिशा दोनों के लिए दो उप मेनू हो सकते हैं। आरटीएल के
लिए एलटीआर
फिडल के लिए फिडल
उम्मीद है कि किसी को भविष्य में यह उपयोगी लगे।





css-transitions