CSS3 过渡到高度自动首先到达高度 0

Question

我有以下 CSS:

.foo
{
    height:100px;
    overflow:hidden;
    -webkit-transition: height 200ms;
    -moz-transition: height 200ms;
    -o-transition: height 200ms;
    transition: height 200ms;
}

.foo.open
{
    height:auto;
}

当 .foo 有一个自动高度时，它的高度将是 ~550px，具体取决于内容。

我使用 jQuery 添加 open 类，我希望使用 CSS3 过渡在 200 毫秒内看到高度从 100px 变为 ~550px。

然而，实际发生的是高度从 100px 变为 0px，然后跳到 ~550px。

-- See Live Demo --

如果我改为将 .open 更改为 height:550px 那么这 works fine ，但是内容长度会有所不同，因此我需要将高度设置为自动，而不是固定的像素高度。

为什么 div 关闭而不是滑动到 ~550px，我该如何解决这个动画问题？

Answer 1

我不认为您可以使用 css 转换转换到 height: auto;。一个不完美的解决方法是转换 max-height 并将其设置为比它所能达到的更大的值。取决于您将其设置为什么值会对转换速度产生影响，但为了简单起见，我已将其设置为 max-height: 1000px;。

这是一个 demo告诉你我的意思。

演示代码:

.foo
{
    max-height:100px;
    overflow:hidden;
    -webkit-transition: max-height 200ms;
    -moz-transition: max-height 200ms;
    -o-transition: max-height 200ms;
    transition: max-height 200ms;
}

.foo.open
{
    max-height:1000px;
}

这不是一个优雅的解决方案，但我希望它能有所帮助。