css3 - CSS3崩溃会产生延迟

我想使用CSS转换制作一个可扩展的块。

.box {
    width: 300px;
    max-height: 30px;
    overflow: hidden;
    background: #aaa;
    -webkit-transition: max-height 400ms ease-in-out;
    -moz-transition: max-height 400ms ease-in-out;
    -ms-transition: max-height 400ms ease-in-out;
    -o-transition: max-height 400ms ease-in-out;
    transition: max-height 400ms ease-in-out;
}
.box.open {
    max-height: 999px;
}

这是工作示例：http://jsfiddle.net/qswgK/。

当我展开该块时，它会很好地滑落，但是当我要折叠它时，它会出现一些延迟。
最新版本的Chrome，Firefox，Opera和IE中注意到了这一点。
为什么会发生这种情况？如果不使用JavaScript动画，我可以避免这种情况吗？

附言如果使用高度动画而不是最大高度，则折叠效果很好，但是我需要折叠并使用未知的扩展高度来扩展块。

最佳答案

似乎发生这种情况是因为折叠的动画开始将最大高度从非常大的值更改，并且花费了一些时间才能穿过元素的实际高度，并且高度的可见更改仅在此刻之后开始。我看到的唯一解决方法是使用单独的动画进行扩展和折叠-第一个较长的动画带有缓动效果，而较短的动画则开始非常急剧，并在后者结束之前逐渐变弱，如下所示：

.box {
    width: 300px;
    max-height: 30px;
    overflow: hidden;
    background: #aaa;
    transition: max-height 300ms cubic-bezier(0, .6, .6, 1); /* for collapsing */
}
.box.open {
    max-height: 999px;
    transition: max-height 400ms ease-in; /* for expansion */
}

fiddle