1

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

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

4

1 回答 1

2

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

.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 */
}

小提琴

于 2013-07-09T10:52:36.493 回答