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

看起来它发生了，因为折叠动画开始从非常大的值改变最大高度，并且它花费一些时间来越过元素的实际高度，并且高度的可见变化仅在之后开始那一刻。我看到的唯一解决方法是使用单独的动画进行扩展和折叠 - 稍微长一点，第一个缓和，稍微缩短一个，开始非常急剧，并在结束后放松，如下所示： / p>

.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

CSS3崩溃与延迟有关

1 个答案: