如何转换高度：0；到高度：自动；使用CSS？

我正在尝试使用CSS转换制作一个

幻灯片

从

高度开始：0。悬停时，高度设置为
height:auto。然而，这导致它只是出现，而不是过渡

如果我从
高度做：40px至<代码>高度：自动
，然后它将向上滑动到
高度：0，然后突然跳到正确的高度

如果不使用JavaScript，我还能做什么


#child0{
身高：0；
溢出：隐藏；
背景色：#dedede；
-moz过渡：高度1s轻松；
-webkit过渡：高度1s轻松；
-o型过渡：高度1s；
过渡：高度1秒；
}
#parent0:hover#child0{
高度：自动；
}
#孩子40{
高度：40px；
溢出：隐藏；
背景色：#dedede；
-moz过渡：高度1s轻松；
-webkit过渡：高度1s轻松；
-o型过渡：高度1s；
过渡：高度1秒；
}
#父母40：悬停#孩子40{
高度：自动；
}
h1{
字体大小：粗体；
}
CSS的两个片段之间的唯一区别是一个片段的高度为0，另一个片段的高度为40。

将我悬停（高度：0）
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容



将我悬停（高度：40）
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容


你可以，只需要一点非语义的把戏。我通常的方法是设置一个外部DIV的高度动画，该DIV有一个子DIV，它是一个无样式的DIV，仅用于测量内容高度


函数growDiv（）{
var growDiv=document.getElementById（'grow'）；
if（增长率、增长率）{
growDiv.style.height=0；
}否则{
var wrapper=document.querySelector（'.measuringWrapper'）；
growDiv.style.height=wrapper.clientHeight+“px”；
}
}
#成长{
-moz过渡：高度0.5s；
-ms转换：高度0.5s；
-o型过渡：高度5s；
-webkit过渡：高度0.5s；
过渡：高度5s；
身高：0；
溢出：隐藏；
轮廓：1px纯红；
}

我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
你可以，只需要一点非语义的把戏。我通常的方法是设置一个外部DIV的高度动画，该DIV有一个子DIV，它是一个无样式的DIV，仅用于测量内容高度


函数growDiv（）{
var growDiv=document.getElementById（'grow'）；
if（增长率、增长率）{
growDiv.style.height=0；
}否则{
var wrapper=document.querySelector（'.measuringWrapper'）；
growDiv.style.height=wrapper.clientHeight+“px”；
}
}
#成长{
-moz过渡：高度0.5s；
-ms转换：高度0.5s；
-o型过渡：高度5s；
-webkit过渡：高度0.5s；
过渡：高度5s；
身高：0；
溢出：隐藏；
轮廓：1px纯红；
}

我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
当其中一个高度为
自动时，当前无法在高度上设置动画，必须设置两个明确的高度。
当其中一个高度为
自动时，当前无法在高度上设置动画，您必须设置两个显式高度。
您可以从“高度：0”转换为“高度：自动”，前提是您还提供了“最小高度”和“最大高度”

div.stretchy{
过渡：1s线性；
}
有弹性的，隐藏的{
身高：0；
}
有弹性的，可见的{
高度：自动；
最小高度：40px；
最大高度：400px；
}
如果同时提供最小高度和最大高度，则可以从“高度：0”转换为“高度：自动”

div.stretchy{
过渡：1s线性；
}
有弹性的，隐藏的{
身高：0；
}
有弹性的，可见的{
高度：自动；
最小高度：40px；
最大高度：400px；
}
我意识到这个帖子已经过时了，但它在某些谷歌搜索中排名靠前，所以我认为它值得更新

还可以获取/设置元素自身的高度：

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

你应该在内联脚本标记中target_box的结束标记之后立即转储此Javascript。
我意识到此线程已经过时，但它在某些Google搜索中排名靠前，因此我认为值得更新

还可以获取/设置元素自身的高度：

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

您应该在内联脚本标记中的target_box的closing标记之后立即转储此Javascript。
使用CSS3转换设置高度动画的视觉解决方法是设置填充动画

您并没有完全获得擦除效果，但是使用过渡持续时间和填充值应该可以让您更接近。如果您不想显式设置height/max height，这应该是您想要的

div{
身高：0；
溢出：隐藏；
填充：0 18px；
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
过渡：所有。5s轻松；
}
动画组{
高度：自动；
填充：24px 18px；
}

（摘自Stephenband的JSFIDLE）
使用CSS3过渡设置高度动画的视觉解决方法是设置填充动画

您并没有完全获得擦除效果，但是使用过渡持续时间和填充值应该可以让您更接近。如果您不想显式设置height/max height，这应该是您想要的

div{
身高：0；
溢流
    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

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;
}

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

/*** 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);

    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);

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

<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;
}

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

.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>

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

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

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