jquery - 为什么这个 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;
}

演示2

这是此页面的报价：

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

Answer 2

您需要将尽可能多的 CSS 移至 JQuery 以真正控制动画：（您已经进入animate-body内部animate-inner，我认为您已经完成了复杂的事情。

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

Answer 3

高度属性应该定义complusary，以使页面平滑过渡到工作表单。甚至可能是 0px。但不能将 auto 或 max-height 设为 0px。