Transição CSS3 para valor ‘auto’

Ontem, encontrei um problema comum: fazer a transição para uma altura individual com o valor ‘auto’.

O problema é que, assim que você tiver um elemento como

.transition-box {
  height: 0;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  overflow: hidden;
}

e quero fazer uma transição para

.transition-box:hover {
  height: auto;
}

não haverá nenhuma animação, apenas ‘salta’ aberto.

Para evitar isso, basta usar max-height e definir um valor maior do que a sua caixa jamais será.
Veja o exemplo, implicando que ‘.transition-box’ nunca será maior que 999 px:

.transition-box {
  max-height: 0;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  overflow: hidden;
}

.transition-box:hover {
  max-height: 999px;
}

É Magica!

Também funciona como um encanto para largura máxima.

SEJA CUIDADOSO

Não vá muito longe – A transição no exemplo acima será animada até 999px – então parece que a transição é muito rápida. Tente definir a duração da transição para algo que pareça preciso.