Why this CSS3 transition on height does not work

Question

I have been working in an accordion, but for some odd reason the following code:

<style>
    .collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease;
    }
    .collapse.in {
    height: auto;
    }
</style>

<div class="accordion">
    <div class="something">
        <a class="" >Accordion Pane 1</a>
    </div>
    <div class="accordion-body collapse">
        <div class="accordion-inner"> content </div>
    </div>
</div>

<script>

$('.something').click(function(event){
    event.preventDefault();
    $(this).next('.accordion-body').toggleClass('in');

})


</script>

http://jsfiddle.net/CvdXK/

doesn't seem to work. The height doesn't animate. And i dont know why.

Thanks very much in advance.

Answer 1

I think you need to set a specific height instead of auto for the transition to happen on height.

.collapse {
    height: 0;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 1.35s ease;
    -moz-transition: height 1.35s ease;
    -o-transition: height 1.35s ease;
    transition: height 1.35s ease;
    background-color: #cecece;
}
.collapse.in {
    height: 200px; /*Set the height here*/
}

Demo

Or another option transition on max-height, like a max-height that is near impossible.

.collapse {
    max-height:0px;
    position: relative;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-in-out;
    -moz-transition: max-height 0.35s ease-in-out;
    -o-transition: max-height 0.35s ease-in-out;
    transition: max-height 0.35s ease-in-out;
    background-color: #cecece;
}
.collapse.in {
    max-height:1000px;
}

Demo2

Here is a quote from this page:

Transitioning gradients: Not every CSS property can be transitioned, and the basic rule is that you can only transition through absolute values. For example, you can’t transition between a height of 0px to auto. The browser can’t calculate the intermediate transition values, so the property change is instant.

Answer 2

You need to move as much of that CSS over to JQuery to truly control the animation: (You've got animate-body inside animate-inner and I think you've over complicated things.

$(".something").click(function () {
    $("this").nextUntil('.accordion-inner').animate({
        duration: 350,
        specialEase: {
            height: "easeInBounce"
        }
    }, {
        duration: 350,
        specialEasing: {
            height: "easeOutBounce"
        }
    });
});

Answer 3

height attribute should be define complusary, to make the smooth page transition to work form very first. could even be of 0px. but must not be auto or max-height as 0px.