Como posso fazer a transição da altura: 0; à altura: auto; usando CSS?

Estou tentando fazer um <ul>slide para baixo usando transições CSS.

O <ul>começa em height: 0;. Ao passar o mouse, a altura é definida como height:auto;. No entanto, isso está fazendo com que simplesmente apareça, não faça transição,

Se eu fizer isso de height: 40px;para height: auto;, ele deslizará para height: 0;e, de repente, pulará para a altura correta.

De que outra forma eu poderia fazer isso sem usar JavaScript?

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

Use max-heightna transição e não height. E defina um valor max-heightpara algo maior do que sua caixa jamais receberá.

Veja a demonstração do JSFiddle fornecida por Chris Jordan em outra resposta aqui.

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

Você deve usar scaleY.

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

<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Criei uma versão prefixada pelo fornecedor do código acima no jsfiddle e alterei seu jsfiddle para usar scaleY em vez de height.

No momento, não é possível animar em altura quando uma das alturas envolvidas é auto, você deve definir duas alturas explícitas.

A solução que eu sempre usei foi a primeira fora fade, então encolher os font-size, paddinge marginvalores. Não parece o mesmo que uma limpeza, mas funciona sem uma estática heightou max-height.

Exemplo de trabalho:

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

Sei que essa é a trigésima terceira resposta a essa pergunta, mas acho que vale a pena, então aqui vai. Esta é uma solução somente CSS com as seguintes propriedades:

• Não há atraso no início, e a transição não para mais cedo. Nas duas direções (expansão e recolhimento), se você especificar uma duração de transição de 300ms no seu CSS, a transição levará 300ms, ponto final.
• Ele está fazendo a transição da altura real (diferente transform: scaleY(0)), por isso faz a coisa certa se houver conteúdo após o elemento recolhível.
• Enquanto (como em outras soluções), há são números mágicos (como "pegar um comprimento que é maior do que sua caixa está sempre vai ser"), não é fatal se suas extremidades suposição até estar errado. A transição pode não parecer incrível nesse caso, mas antes e depois da transição, isso não é um problema: No estado expandido ( height: auto), todo o conteúdo sempre tem a altura correta (diferente de, por exemplo, se você escolher uma max-heightque seja muito baixo). E no estado recolhido, a altura é zero como deveria.

Demo

Aqui está uma demonstração com três elementos recolhíveis, com diferentes alturas, que usam o mesmo CSS. Você pode clicar em "página inteira" após clicar em "executar trecho". Observe que o JavaScript apenas alterna a collapsedclasse CSS, não há medição envolvida. (Você pode fazer esta demonstração exata sem qualquer JavaScript usando uma caixa de seleção ou :target). Observe também que a parte do CSS responsável pela transição é bastante curta e o HTML requer apenas um único elemento adicional do wrapper.

$(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); // this just rotates the expander arrow
  });
});

.collapsible-wrapper {
  display: flex;
  overflow: hidden;
}
.collapsible-wrapper:after {
  content: '';
  height: 50px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}
.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
              visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
  height: 0;
  transition: height 0.3s linear;
  max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
   is just styling for this demo */

#container {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}  


.menu {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 20px;

  
}

.menu-item {
  display: block;
  background: linear-gradient(to bottom, #fff 0%,#eee 100%);
  margin: 0;
  padding: 1em;
  line-height: 1.3;
}
.collapsible .menu-item {
  border-left: 2px solid #888;
  border-right: 2px solid #888;
  background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
  background: linear-gradient(to bottom, #aaa 0%,#888 100%);
  color: white;
  cursor: pointer;
}
.menu-item.toggler:before {
  content: '';
  display: block;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  width: 0;
  height: 0;
  float: right;
  transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
  transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

</div>

Como funciona?

De fato, existem duas transições envolvidas para que isso aconteça. Um deles faz a transição margin-bottomde 0px (no estado expandido) para -2000pxno estado recolhido (semelhante a esta resposta ). O 2000 aqui é o primeiro número mágico, é baseado na suposição de que sua caixa não será maior que isso (2000 pixels parece uma escolha razoável).

Usando o margin-bottom transição sozinha por si só tem dois problemas:

• Se você realmente tiver uma caixa com mais de 2000 pixels, uma margin-bottom: -2000px não ocultará tudo - haverá coisas visíveis mesmo no caso recolhido. Esta é uma pequena correção que faremos mais tarde.
• Se a caixa real tiver, digamos, 1000 pixels de altura e sua transição tiver 300 ms, a transição visível já estará concluída após cerca de 150 ms (ou, na direção oposta, inicia 150 ms tarde).

A correção desse segundo problema é onde entra a segunda transição, e essa transição visa conceitualmente a altura mínima do wrapper ("conceitualmente" porque não estamos realmente usando a min-heightpropriedade para isso; mais sobre isso posteriormente).

Aqui está uma animação que mostra como a combinação da transição da margem inferior com a transição mínima da altura, ambas de igual duração, nos fornece uma transição combinada da altura total para a altura zero que tem a mesma duração.

A barra esquerda mostra como a margem inferior negativa empurra a parte inferior para cima, reduzindo a altura visível. A barra do meio mostra como a altura mínima garante que, no caso de colapso, a transição não termine mais cedo e, no caso de expansão, a transição não comece tarde. A barra direita mostra como a combinação dos dois faz com que a caixa faça a transição da altura total para a altura zero na quantidade correta de tempo.

Para minha demonstração, estabeleci 50px como o valor mínimo de altura superior. Este é o segundo número mágico e deve ser menor do que a altura da caixa jamais seria. 50px parece razoável também; parece improvável que você queira muitas vezes tornar um elemento dobrável que não tem nem 50 pixels de altura.

Como você pode ver na animação, a transição resultante é contínua, mas não diferenciável - no momento em que a altura mínima é igual à altura total ajustada pela margem inferior, ocorre uma mudança repentina na velocidade. Isso é muito perceptível na animação porque usa uma função de tempo linear para ambas as transições e porque toda a transição é muito lenta. No caso real (minha demonstração no topo), a transição leva apenas 300ms e a transição da margem inferior não é linear. Eu brinquei com muitas funções de tempo diferentes para ambas as transições, e as que eu acabei achando que funcionaram melhor na mais ampla variedade de casos.

Restam dois problemas para corrigir:

1. o ponto acima, onde caixas com mais de 2000 pixels de altura não estão completamente ocultas no estado recolhido,
2. e o problema inverso, onde, no caso não oculto, caixas com menos de 50 pixels de altura são muito altas, mesmo quando a transição não está em execução, porque a altura mínima as mantém em 50 pixels.

Resolvemos o primeiro problema, atribuindo ao elemento contêiner a max-height: 0no caso recolhido, com uma 0s 0.3stransição. Isso significa que não é realmente uma transição, mas max-heighté aplicada com um atraso; só se aplica quando a transição termina. Para que isso funcione corretamente, também precisamos escolher um numérico max-heightpara o estado oposto, sem recolhimento . Mas, diferentemente do caso de 2000 px, onde escolher um número muito grande afeta a qualidade da transição, nesse caso, isso realmente não importa. Assim, podemos simplesmente escolher um número que é tão alto que sabemos que nenhuma altura chegará perto disso. Eu escolhi um milhão de pixels. Se você acha que precisa oferecer suporte a conteúdo com mais de um milhão de pixels de altura, 1) desculpe-me e 2) apenas adicione alguns zeros.

O segundo problema é a razão pela qual não estamos realmente usando min-heighta transição de altura mínima. Em vez disso, há um ::afterpseudoelemento no contêiner heightque transita de 50px para zero. Isso tem o mesmo efeito que min-height: Não permitirá que o contêiner encolha abaixo da altura que o pseudoelemento tenha atualmente. Mas como estamos usando height, não min-height, agora podemos usar max-height(mais uma vez aplicado com atraso) para definir a altura real do pseudo-elemento como zero quando a transição terminar, garantindo que, pelo menos fora da transição, até mesmo pequenos elementos tenham o altura correta. Por min-heightser mais forte que max-heightisso não funcionaria se usássemos o contêiner em min-heightvez do pseudo-elementoheight . Assim como omax-height no parágrafo anterior, isso max-heighttambém precisa de um valor para o extremo oposto da transição. Mas, neste caso, podemos simplesmente escolher os 50px.

Testado no Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (exceto por um problema de layout da caixa flexível na minha demonstração que não incomodava a depuração) e Safari (Mac, iOS ) Falando em flexbox, deve ser possível fazer isso funcionar sem usar flexbox; na verdade, acho que você poderia fazer quase tudo funcionar no IE7 - exceto pelo fato de não ter transições CSS, tornando-o um exercício inútil.

Você pode, com um pouco de brincadeira não-semântica. Minha abordagem usual é animar a altura de uma DIV externa que tenha um único filho, que é uma DIV sem estilo usada apenas para medir a altura do conteúdo.

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>

Alguém gostaria de poder simplesmente dispensar o .measuringWrappere apenas definir a altura do DIV para automático e fazer com que o animar, mas isso não parece funcionar (a altura é definida, mas não ocorre animação).

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>

Minha interpretação é que é necessária uma altura explícita para que a animação seja executada. Você não pode obter uma animação em altura quando a altura (a altura inicial ou final) é auto.

Uma solução visual para animar a altura usando transições CSS3 é animar o preenchimento.

Você não obtém o efeito de limpeza total, mas brincar com os valores de duração da transição e preenchimento deve aproximá-lo o suficiente. Se você não deseja definir explicitamente altura / altura máxima, é isso que você está procurando.

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/ (extraído de stephband's acima do jsFiddle)

Minha solução alternativa é fazer a transição da altura máxima para a altura exata do conteúdo para uma boa animação suave e, em seguida, usar um retorno de chamada transiçãoEnd para definir a altura máxima para 9999px para que o conteúdo possa ser redimensionado livremente.

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>

A resposta aceita funciona na maioria dos casos, mas não funciona bem quando você divpode variar bastante de altura - a velocidade da animação não depende da altura real do conteúdo e pode parecer instável.

Você ainda pode executar a animação real com CSS, mas precisa usar o JavaScript para calcular a altura dos itens, em vez de tentar usar auto. Não é necessário jQuery, embora você precise modificá-lo um pouco, se quiser compatibilidade (funciona na versão mais recente do Chrome :)).

window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
}

#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}

<div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <!-- Works well with dynamically-sized content. -->
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Houve pouca menção à Element.scrollHeightpropriedade que pode ser útil aqui e ainda pode ser usada com uma transição CSS pura. A propriedade sempre contém a altura "completa" de um elemento, independentemente de como e como seu conteúdo excede como resultado da altura recolhida (por exemplo height: 0).

Como tal, para um elemento height: 0(efetivamente totalmente recolhido), sua altura "normal" ou "total" ainda está prontamente disponível através de seu scrollHeightvalor (invariavelmente um comprimento de pixel ).

Para esse elemento, supondo que ele já tenha a transição configurada como por exemplo (usando ulconforme a pergunta original):

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

Podemos acionar a "expansão" animada desejada de altura, usando apenas CSS, com algo como o seguinte (assumindo aqui que a ulvariável se refere à lista):

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

É isso aí. Se você precisar recolher a lista, uma das duas instruções a seguir fará:

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

Meu caso de uso específico girava em torno de listas animadas de comprimentos desconhecidos e muitas vezes consideráveis; portanto, não me sentia confortável em optar por uma especificação "suficientemente grande" heightou arbitrária max-heighte por arriscar conteúdo de corte ou conteúdo que você precisa rolar de repente (se overflow: auto, por exemplo) . Além disso, a flexibilização e o tempo são interrompidos com as max-heightsoluções baseadas, porque a altura usada pode atingir seu valor máximo muito antes do que seria necessário para max-heightalcançá-lo 9999px. E à medida que as resoluções de tela aumentam, os comprimentos de pixel 9999pxdeixam um gosto ruim na minha boca. Esta solução em particular resolve o problema de maneira elegante, na minha opinião.

Finalmente, esperamos que futuras revisões dos autores de endereços CSS precisem fazer esse tipo de coisa de maneira ainda mais elegante - revisite a noção de valores "computados" vs "usados" e "resolvidos" e considere se as transições devem ser aplicadas a computadores computados. valores, incluindo transições com widthe height(que atualmente recebem um tratamento especial).

Use max-heightcom flexibilização e atraso de transição diferentes para cada estado.

HTML:

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

CSS:

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

Consultar exemplo: http://jsfiddle.net/0hnjehjc/1/

Não há valores codificados.

Sem JavaScript.

Sem aproximações.

O truque é usar um arquivo oculto e duplicado div para fazer o navegador entender o que 100% significa.

Este método é adequado sempre que você puder duplicar o DOM do elemento que deseja animar.

.outer {
  border: dashed red 1px;
  position: relative;
}

.dummy {
  visibility: hidden;
}

.real {
  position: absolute;
  background: yellow;
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.outer:hover>.real {
  height: 100%;
}

Hover over the box below:
<div class="outer">
  <!-- The actual element that you'd like to animate -->
  <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
  <!-- An exact copy of the element you'd like to animate. -->
  <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
</div>

Ao postar isso, já existem mais de 30 respostas, mas sinto que minha resposta melhora a resposta já aceita por jake.

Eu não estava contente com o problema que surge do simples uso das max-heighttransições CSS3, pois, como muitos comentadores observaram, você deve definir seu max-heightvalor muito próximo da altura real ou sofrerá um atraso. Veja este JSFiddle para um exemplo desse problema.

Para contornar isso (ainda sem usar JavaScript), adicionei outro elemento HTML que faz a transição do transform: translateYvalor CSS.

Isso significa os dois max-heighte translateYé usado: max-heightpermite que o elemento empurre elementos abaixo dele, enquanto translateYfornece o efeito "instantâneo" que queremos. O problema com max-heightainda existe, mas seu efeito é reduzido. Isso significa que você pode definir uma altura muito maior para o seu max-heightvalor e se preocupar com isso menos.

O benefício geral é que, na transição de volta (no colapso), o usuário vê a translateYanimação imediatamente, portanto, não importa realmente quanto tempo max-heightleva.

Solução como Fiddle

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>

Ok, então acho que encontrei uma resposta super simples ... não max-height, usa relativeposicionamento, trabalha com lielementos e é CSS puro. Eu não testei em nada além do Firefox, apesar de julgar pelo CSS, ele deve funcionar em todos os navegadores.

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

CSS

.wrap { overflow:hidden; }

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

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

HTML

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

EDIT: Role para baixo para obter uma resposta atualizada
Eu estava fazendo uma lista suspensa e vi este Post ... muitas respostas diferentes, mas decido compartilhar minha lista suspensa também ... Não é perfeito, mas pelo menos usará apenas css para suspenso! Eu tenho usado transform: translateY (y) para transformar a lista na exibição ...
Você pode ver mais no teste
http://jsfiddle.net/BVEpc/4/ Coloquei
div por trás de cada li porque meu lista suspensa vem de cima e para mostrá-las corretamente, isso era necessário, meu código div é:

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

e passe o mouse é:

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

e como a altura de ul é definida como o conteúdo, ela pode superar o conteúdo do seu corpo, por isso fiz isso para ul:

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

e passe o mouse:

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

a segunda vez após a transição for atrasada e ela ficará oculta após minha lista suspensa ter sido animada ...
Espero que mais tarde alguém se beneficie dessa.

Edição: Eu simplesmente não posso acreditar ppl realmente usando este protótipo! este menu suspenso é apenas para um submenu e é tudo !! Atualizei um melhor que pode ter dois submenus para a direção ltr e rtl com o suporte do IE 8.
Fiddle for LTR
Fiddle for RTL
espero que alguém ache isso útil no futuro.

Você pode fazer a transição de height: 0 para height: auto, desde que você também forneça altura mínima e altura máxima.

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

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

Solução Flexbox

Prós:

• simples
• sem JS
• transição suave

Contras:

• O elemento precisa ser colocado em um contêiner flexível de altura fixa

A maneira como funciona é sempre ter base flexível: auto no elemento com conteúdo e, em vez disso, fazer a transição flex-grow e flex-shrink.

Edit: JS Fiddle aprimorado, inspirado na interface do Xbox One.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.25s;
  font-family: monospace;
}

body {
  margin: 10px 0 0 10px;
}

.box {
  width: 150px;
  height: 150px;
  margin: 0 2px 10px 0;
  background: #2d333b;
  border: solid 10px #20262e;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
}

.space {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;    
}

p {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  background: #20262e;
  padding: 10px;
  width: 100%;
  text-align: left;
  color: white;
}

.box:hover .space {
  flex-grow: 0;
  flex-shrink: 1;
}
  
.box:hover p {
  flex-grow: 1;
  flex-shrink: 0;    
}

<div class="box">
  <div class="space"></div>
  <p>
    Super Metroid Prime Fusion
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Resident Evil 2 Remake
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Yolo The Game
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Final Fantasy 7 Remake + All Additional DLC + Golden Tophat
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    DerpVille
  </p>
</div>

JS Fiddle

Expandindo a resposta de @ jake, a transição alcançará o valor de altura máxima, causando uma animação extremamente rápida - se você definir as transições para ambos: pairar e desligar, poderá controlar um pouco mais a velocidade louca.

Portanto, o li: hover é quando o mouse entra no estado e, em seguida, a transição na propriedade não pairada será deixada pelo mouse.

Espero que isso ajude.

por exemplo:

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

Aqui está um violino: http://jsfiddle.net/BukwJ/

Eu acho que criei uma solução realmente sólida

ESTÁ BEM! Eu sei que esse problema é tão antigo quanto a Internet, mas acho que tenho uma solução que me transformei em um plug - in chamado transição de mutantes . Minha solução define os style=""atributos para elementos rastreados sempre que houver uma alteração no DOM. o resultado final é que você pode usar um bom ole CSS para suas transições e não usar correções de hackers ou javascript especial. A única coisa que você precisa fazer é definir o que deseja rastrear no elemento em questão usando data-mutant-attributes="X".

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

É isso aí! Esta solução usa MutationObserver para acompanhar as alterações no DOM. Por isso, você não precisa realmente configurar nada ou usar o javascript para animar manualmente as coisas. As alterações são rastreadas automaticamente. No entanto, como ele usa o MutationObserver, isso fará a transição apenas no IE11 +.

Fiddles!

• Demonstrando a transição de height: autoparaheight: 100%
• Demonstrando a transição height: autoao adicionar filhos

Aqui está uma maneira de fazer a transição de qualquer altura inicial, incluindo 0, para automática (tamanho total e flexível) sem exigir código de configuração fixa por nó ou qualquer código de usuário para inicializar: https://github.com/csuwildcat / transição-automática . Este é basicamente o Santo Graal para o que você quer, acredito -> http://codepen.io/csuwldcat/pen/kwsdF . Basta colocar o seguinte arquivo JS em sua página e tudo o que você precisa fazer depois é adicionar / remover um único atributo booleano -reveal="" - dos nós que deseja expandir e contratar.

Aqui está tudo o que você precisa fazer como usuário, depois de incluir o bloco de código encontrado abaixo do código de exemplo:

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

Aqui está o bloco de código a incluir na sua página; depois disso, é tudo molho:

Solte esse arquivo JS na sua página - tudo isso apenas funciona

/ * Código para altura: auto; transição * /

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

/ * Código para 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);

A resposta de Jake para animar a altura máxima é ótima, mas achei o atraso causado por definir uma grande altura máxima irritante.

Pode-se mover o conteúdo recolhível para uma div interna e calcular a altura máxima obtendo a altura da div interna (via JQuery, seria o outerHeight ()).

$('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');
});

Aqui está um link do jsfiddle: http://jsfiddle.net/pbatey/duZpT

Aqui está um jsfiddle com a quantidade mínima absoluta de código necessária: http://jsfiddle.net/8ncjjxh8/

Sei que esse segmento está envelhecendo, mas está classificado em algumas pesquisas no Google, então acho que vale a pena atualizar.

Você também obtém / define a altura do elemento:

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

Você deve despejar esse Javascript imediatamente após a tag de fechamento do target_box em uma tag de script embutido.

Eu fui capaz de fazer isso. Eu tenho um .childe um .parentdiv. A div criança se encaixa perfeitamente dentro da largura / altura dos pais com o absoluteposicionamento. Em seguida, animar a translatepropriedade para empurrar seu Yvalor para baixo 100%. Sua animação muito suave, sem falhas ou desvantagens como qualquer outra solução aqui.

Algo assim, pseudo código

.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 */
}

Você deve especificar um heightno .parent, no px, %ou licença como auto. Essa div mascara a .childdiv quando ela desliza para baixo.

Eu postei uma resposta com algum JavaScript e obtive votos negativos, por isso fiquei irritado e tentei novamente, e o decifrei apenas com CSS!

Esta solução usa algumas 'técnicas':

• padding-bottom:100%'hack' onde porcentagens são definidas em termos da largura atual do elemento. Mais informações sobre esta técnica.
• embalagem por contração do flutuador (necessitando de uma div extra para aplicar o corte de limpeza do flutuador)
• uso não semântico de https://caniuse.com/#feat=css-writing-mode e algumas transformações para desfazê-lo (isso permite o uso do preenchimento de preenchimento acima em um contexto vertical)

O resultado, porém, é que obtemos uma transição de desempenho usando apenas CSS e uma única função de transição para obter a transição sem problemas; o Santo Graal!

Claro, há uma desvantagem! Não sei como controlar a largura em que o conteúdo é cortado ( overflow:hidden); por causa do hack do fundo do preenchimento, a largura e a altura estão intimamente relacionadas. Pode haver uma maneira, então, voltarei a ela.

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

body {
  padding: 1em;
}

.trigger {
  font-weight: bold;
}

/* .expander is there for float clearing purposes only */
.expander::after {
  content: '';
  display: table;
  clear: both;
}

.outer {
  float: left; /* purpose: shrink to fit content */
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  transition: padding-bottom 0.3s ease-in-out;  /* or whatever crazy transition function you can come up with! */
  padding-bottom: 0%;  /* percentage padding is defined in terms of width. The width at this level is equal to the height of the content */
  height: 0;

  /* unfortunately, change of writing mode has other bad effects like orientation of cursor */
  writing-mode: vertical-rl;
  cursor: default; /* don't want the vertical-text (sideways I-beam) */
  transform: rotate(-90deg) translateX(-100%);  /* undo writing mode */
  transform-origin: 0 0;
  margin: 0;  /* left/right margins here will add to height */
}

.inner > div { white-space: nowrap; }

.expander:hover .inner,  /* to keep open when expanded */
.trigger:hover+.expander .inner {
  padding-bottom: 100%;
}

<div class="trigger">HoverMe</div>
<div class="expander">
  <div class="outer">
    <div class="inner">
      <div>First Item</div>
      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
      <div>Long Content can't be wider than outer height unfortunately</div>
      <div>Last Item</div>
    </div>
  </div>
</div>
<div>
  after content</div>
</div>

Aqui está uma solução que acabei de usar em combinação com o jQuery. Isso funciona para a seguinte estrutura HTML:

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

e a função:

    $('#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);
    });

Você pode usar uma função de clique para definir e remover a altura usando css()

$('#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');
})

CSS:

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

Estive recentemente fazendo a transição max-heightdos lielementos em vez da embalagemul .

O raciocínio é que o atraso para os pequenos max-heightsé muito menos perceptível (se em tudo) em relação ao grande max-heights, e eu também pode definir o meu max-heightvalor relativo ao font-sizedo liem vez de um número enorme arbitrária usando emsourems .

Se o tamanho da minha fonte for 1rem, definirei meu max-heightcomo algo como 3rem(para acomodar o texto quebrado). Você pode ver um exemplo aqui:

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

Não li tudo em detalhes, mas tive esse problema recentemente e fiz o seguinte:

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

Isso permite que você tenha uma div que, a princípio, mostre conteúdo com até 200px de altura e, ao passar o mouse, o tamanho se torna pelo menos tão alto quanto o conteúdo inteiro da div. O Div não se torna 3000px, mas 3000px é o limite que estou impondo. Certifique-se de fazer a transição no non: hover, caso contrário você poderá obter uma renderização estranha. Dessa maneira, o: hover é herdado do non: hover.

A transição não funciona do px para% ou para automático. Você precisa usar a mesma unidade de medida. Este trabalho é bom para mim. Usar HTML5 o torna perfeito ....

Lembre-se de que sempre há uma solução alternativa ...; )

Espero que alguém ache isso útil

A solução de altura máxima da Jake funciona bem, se o valor da altura máxima codificado fornecido não for muito maior que a altura real (porque, caso contrário, existem atrasos e problemas de tempo indesejáveis). Por outro lado, se o valor codificado permanentemente não for maior que a altura real, o elemento não abrirá completamente.

A solução somente CSS a seguir também requer um tamanho codificado que deve ser maior que a maioria dos tamanhos reais que ocorrem. No entanto, esta solução também funciona se, em algumas situações, o tamanho real for maior que o tamanho codificado. Nesse caso, a transição pode pular um pouco, mas nunca deixará um elemento parcialmente visível. Portanto, essa solução também pode ser usada para conteúdo desconhecido, por exemplo, de um banco de dados, onde você sabe que o conteúdo geralmente não é maior que x pixels, mas há exceções.

A idéia é usar um valor negativo para margem inferior (ou margem superior para uma animação ligeiramente diferente) e colocar o elemento de conteúdo em um elemento intermediário com estouro: oculto. A margem negativa do elemento de conteúdo reduz a altura do elemento do meio.

O código a seguir usa uma transição na margem inferior de -150px para 0px. Só isso funciona bem, desde que o elemento de conteúdo não seja superior a 150px. Além disso, ele usa uma transição na altura máxima para o elemento do meio de 0px a 100%. Por fim, isso oculta o elemento do meio se o elemento de conteúdo for superior a 150px. Para altura máxima, a transição é usada apenas para atrasar sua aplicação em um segundo ao fechar, não para um efeito visual suave (e, portanto, pode variar de 0px a 100%).

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML:

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

O valor da margem inferior deve ser negativo e o mais próximo possível da altura real do elemento de conteúdo. Se (o valor do absoute) for maior, existem problemas de atraso e tempo semelhantes aos das soluções de altura máxima, que podem ser limitadas desde que o tamanho do código rígido não seja muito maior que o real. Se o valor absoluto para o fundo da margem for menor que a altura real, a transição pula um pouco. De qualquer forma, após a transição, o elemento de conteúdo é totalmente exibido ou totalmente removido.

Para obter mais detalhes, consulte minha postagem no blog http://www.taccgl.org/blog/css_transition_display.html#combined_height

Você pode fazer isso criando uma animação reversa (recolhida) com o caminho do clipe.

#child0 {
    display: none;
}
#parent0:hover #child0 {
    display: block;
    animation: height-animation;
    animation-duration: 200ms;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 200ms;
}
@keyframes height-animation {
    0% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 100%, 0% 100%);
    }
}

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

Esta não é exatamente uma "solução" para o problema, mas mais uma solução alternativa. Funciona apenas como escrito com texto, mas pode ser alterado para funcionar com outros elementos, conforme necessário, tenho certeza.

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

Aqui está um exemplo: http://codepen.io/overthemike/pen/wzjRKa

Essencialmente, você define o tamanho da fonte como 0 e faz a transição para que, em vez da altura, altura máxima ou escalaY () etc., em um ritmo rápido o suficiente para que a altura se transforme no que você deseja. Atualmente, não é possível transformar a altura real com CSS para automático, mas transformar o conteúdo é, portanto, a transição do tamanho da fonte.

• Nota - existe Javascript no codepen, mas seu único objetivo é adicionar / remover classes css ao clicar no acordeão. Isso pode ser feito com botões de opção ocultos, mas eu não estava focado nisso, apenas na transformação da altura.