CSS3 折叠适用于延迟

Question

我想使用 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 动画的情况下避免这种情况吗？

P.S.如果使用高度动画而不是最大高度，折叠效果很好，但我需要折叠和展开未知展开高度的块。

Answer 1

看起来这是因为折叠动画开始从非常大的值更改最大高度，并且需要一些时间才能跨越元素的实际高度，并且高度的可见变化仅在之后才开始那一刻。我看到的唯一解决方法是使用单独的动画进行扩展和折叠——第一个动画稍长一点，第一个缓入，一个短一点，开始非常急剧，在结束前缓出，如下所示：

.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