Animación de altura máxima con transiciones CSS

Solución de retardo fija:

Ponga cubic-bezier(0, 1, 0, 1) función de transición para el elemento.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

Esta es una vieja pregunta, pero acabo de encontrar una manera de hacerlo y quería pegarlo en algún lugar para saber dónde encontrarlo si lo necesito de nuevo: o)

Así que necesitaba un acordeón con divs "sectionHeading" clicables que revelaran/ocultaran divs "sectionContent" correspondientes. Los divs de contenido de sección tienen alturas variables, lo que crea un problema ya que no puede animar la altura al 100%. He visto otras respuestas que sugieren animar la altura máxima en su lugar, pero esto significa que a veces se producen retrasos cuando la altura máxima que utiliza es mayor que la altura real.

La idea es usar jQuery on load para buscar y establecer explícitamente las alturas de los divs "sectionContent". Luego agregue una clase css 'noHeight' a cada manejador de clics para alternarlo:

$(document).ready(function() {
    $('.sectionContent').each(function() {
        var h = $(this).height();
        $(this).height(h).addClass('noHeight');
    });
    $('.sectionHeader').click(function() {
        $(this).next('.sectionContent').toggleClass('noHeight');
    });
});

Para completar, las clases CSS relevantes:

.sectionContent {
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.noHeight {
        height: 0px !important;
}

Ahora las transiciones de altura funcionan sin retrasos.

Puedes lograr esto bien usando jQuery Transit :

$(function () {
    $(".paragraph").click(function () {
        var expanded = $(this).is(".expanded");
        if (expanded) 
        {
            $(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
        } 
        else 
        {
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
        }
    });
});

Definitivamente puedes ordenarlo un poco a tu gusto, pero eso debería hacer lo que quieras.

JS Fiddle Demo