CSS转换不会同时执行 [英] CSS transitions not executing at the same time

问题描述

我创建了一个超级简单的手风琴，其中使用h3/p设置，而p最初具有max-height: 0，但是如果h3具有.open类，则p得到类似max-height: 100px(h3.open + p {max-height: 100px})的东西.

I've created a super simple accordion where I use a h3/p setup and the ps initially have max-height: 0 but if the h3 has an .open class the p gets something like max-height: 100px (h3.open + p {max-height: 100px}).

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

Then I use a few lines of jQuery to add the open class to the clicked h3.

我遇到的问题是，当我单击标题时，它先滑出，然后像半秒钟后，另一个滑回去.为什么转换没有完全同时执行?

The problem I'm having is that when I click a heading it first slides out, and then like half a second later the other one slides back up. Why aren't the transitions executing at the exact same time?

这是一个小提琴: 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');
    });
});

推荐答案

max-height正在从100px过渡到0.您的元素没有那么高，因此它们的高度实际上直到过渡结束时才开始发生变化.

The max-height is transitioning from 100px to 0. Your elements aren’t that tall, so their heights don’t actually start to change until near the end of the transition.

这篇关于CSS转换不会同时执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！