CSS转换不是同时执行

Question

我创造了一个超级简单的手风琴,我使用h3/ psetup和ps最初有,max-height: 0但如果h3有一个.open类p得到类似max-height: 100px(h3.open + p {max-height: 100px}).

然后我使用几行jQuery将open类添加到单击的h3.

我遇到的问题是,当我点击标题时,它首先会滑出,然后半秒后另一个向后滑动.为什么转换不是在同一时间执行？

这是一个小提琴:http://jsfiddle.net/2uhVY/

以下是所有代码:

HTML

<div class="accordion">
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
</div>

CSS

.accordion {

}

.accordion h3 {
    margin: 0;
    cursor: pointer;
}

.accordion p {
    margin: 20px 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
}

.accordion h3.open + p {
    max-height: 100px;
}

JS(jQuery)

$(function () {
    var h3s = $('.accordion h3');

    h3s.click(function () {
        h3s.removeClass('open');
        $(this).addClass('open');
    });
});

Answer 1

在max-height从过渡100px到0.你的元素并不高,所以它们的高度实际上并没有开始改变,直到过渡结束.