为什么这个CSS3在高度上的过渡不起作用

Question

我一直在手风琴中工作,但由于一些奇怪的原因,下面的代码:

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

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

首先十分感谢.

Answer 1

我认为您需要设置一个特定的高度,而不是在高度上auto进行过渡.

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

演示

或者在最大高度上进行另一个选项转换,例如几乎不可能的最大高度.

.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

以下是此页面的引用:

转换渐变:并非每个CSS属性都可以转换,基本规则是您只能通过绝对值进行转换.例如,您无法在0px的高度与auto之间转换.浏览器无法计算中间转换值,因此属性更改是即时的.