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