jquery – 为什么CSS3在高度上的转换不起作用

我一直在手风琴工作,但由于奇怪的原因,以下代码：

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

似乎没有工作.高度不动画.我不知道为什么

非常感谢提前.

解决方法

我想你需要设置一个特定的高度而不是自动,以便在高度上发生转换.

.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

或者另一个选项在最大高度上转换,就像最接近不可能的最大高度.

.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

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